[Hỏi đáp] How to make a table

I have a code for viewtopic_body to show new topic and related topic.

Code:

 <table><tr><th><div class="main">
              <div class="main-head clearfix">
                <p class="h2">
                  New topics in same category
                </p>
              </div>
              <ol style="list-style-type:decimal-leading-zero;" id="cungchuyenmuc" class="main-content frm">
                        </ol>
            </div> </th>

<th> <div class="main">
              <div class="main-head clearfix">
                <p class="h2">
                  Related topics <a href="{TOPIC_URL}"style="color: white;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"></a>
                </p>
              </div>
              <ol style="list-style-type:decimal-leading-zero; text-align: left;" id="bailienquan" class="main-content frm">
              </ol>
          </div></th></tr></table>
       
        <script type="text/javascript">
$(function(){$('#cungchuyenmuc').load('/f{FORUM_ID}-forum .tdtopics:not(".tdtopics:contains(\"Announcement\"), .tdtopics:contains(\"Sticky\"), .tdtopics:contains(\"Global announcement\")") .topic-title a.topictitle:lt(10)',function(){$('#cungchuyenmuc a.topictitle').wrap("<p></p>")});var topictitleFMvi='{TOPIC_TITLE}';var fmviTopictitle=topictitleFMvi.replace(/ /gi,'+');$('#bailienquan').load('/search?mode=searchbox&search_keywords='+fmviTopictitle+'&show_results=topics .tdtopics:not(".tdtopics:contains(\"Announcement\"), .tdtopics:contains(\"Sticky\"), .tdtopics:contains(\"Global announcement\")") .topic-title a.topictitle:lt(10)',function(){$('#bailienquan a.topictitle').wrap("<p></p>")})});
        </script>

But, these two thing are separeted in table. I want to merge them just like lasttopic design.
http://prntscr.com/40rx57

Try this one

Code:

 <table><tr><td><div class="main">
              <div class="main-head clearfix">
                <p class="h2">
                  New topics in same category
                </p>
              </div>
              <ol style="list-style-type:decimal-leading-zero;" id="cungchuyenmuc" class="main-content frm">
                        </ol>
            </div>  <div class="main">
              <div class="main-head clearfix">
                <p class="h2">
                  Related topics <a href="{TOPIC_URL}"style="color: white;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"></a>
                </p>
              </div>
              <ol style="list-style-type:decimal-leading-zero; text-align: left;" id="bailienquan" class="main-content frm">
              </ol>
          </div></td></tr></table>
       
        <script type="text/javascript">
$(function(){$('#cungchuyenmuc').load('/f{FORUM_ID}-forum .tdtopics:not(".tdtopics:contains(\"Announcement\"), .tdtopics:contains(\"Sticky\"), .tdtopics:contains(\"Global announcement\")") .topic-title a.topictitle:lt(10)',function(){$('#cungchuyenmuc a.topictitle').wrap("<p></p>")});var topictitleFMvi='{TOPIC_TITLE}';var fmviTopictitle=topictitleFMvi.replace(/ /gi,'+');$('#bailienquan').load('/search?mode=searchbox&search_keywords='+fmviTopictitle+'&show_results=topics .tdtopics:not(".tdtopics:contains(\"Announcement\"), .tdtopics:contains(\"Sticky\"), .tdtopics:contains(\"Global announcement\")") .topic-title a.topictitle:lt(10)',function(){$('#bailienquan a.topictitle').wrap("<p></p>")})});
        </script>

@NCAT, your code also seprated to items


I want to make like this

Use float:left for the first <div class="main">, then edit their width at 50%, or calc(50% - *px) with * is their padding or margin

Oh no, I want to keep their table size same, whatever the new topic and related topic contains different number of links.

Just change font-size, their font size are not the same :-s

You didn't understand. If "New Topic in Same Category" contains 2 topics, then what? can you fix it by font size. There always a separation between this.
https://i.imgur.com/GlUeE3b.png

But look at this table. The table is fixed no matter how many links it contains.
http://prntscr.com/40y7gi

Oh =)) i think the number of links in the table are the same :v
Change the height bro :v