发表新帖
发表新帖

HTML — Two Tables Horizontally Side by Side

后端 未结
关注
9 500
野趣味
野趣味 2020-11-30 09:49

I\'m trying to display tables next to each other horizontally, but this is what I\'m getting.
\"enter

相关标签:
9条回答
  • 长情又很酷
    2020-11-30 10:34 
    <!DOCTYPE html>
<html>
<body>

<table style="float: left; border-collapse:collapse; " border=\"1px;\" >
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>


<table style="border-collapse:collapse; " border=\"1px;\">
  <tr>
    <td>Jill jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eveeve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>Johnjohj</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>

</body>
</html>
    0 讨论(0)
  • 名媛妹妹
    2020-11-30 10:40

    This answer is taken from Chris Baker's answer of a duplicate question. Please up vote his answer.

    One can use float: left or display: inline-block depending on content and space:

    <table style="display: inline-block">

<table style="float: left">

    This page is already setup with the HTML to try out and see how it looks in the browser: http://jsfiddle.net/SM769/

    Documentation

    • CSS display on MDN - https://developer.mozilla.org/en/CSS:display
    • CSS float on MDN - https://developer.mozilla.org/en/CSS/float

    Example

    <table style="float: left">
   <tr>
      <td>..</td>
   </tr>
</table>

<table style="float: left">
   <tr>
      <td>..</td>
   </tr>
</table>
    0 讨论(0)
  • 轻奢々
    2020-11-30 10:44

    You have to apply a CSS rule to your tables in order to follow the normal document float which is:

    table{ float:left; }

    or

    <table style="float: left;">.........</table>

    PS: Just make sure that this tag selector block won't affect any other tables that you don't them to be so, otherwise you are recommended to use ID or class selectors.

    0 讨论(0)
  • 花落未央
    2020-11-30 10:45

    try to add to your CSS file:

    .table-wrapper {
    display:inline-flex;
}

    I have tried with display: inline-table, with float: left, and other stuff, but not a single one worked for me.

    0 讨论(0)
  • 盖世英雄少女心
    2020-11-30 10:45

    Adding display: table-cell; to the tables may help. http://www.quirksmode.org/css/display.html And you may need to add wrapping div with display: table; or add that property to some element depending on your page structure.

    0 讨论(0)
  • 醉梦人生
    2020-11-30 10:47

    To show two tables side by side, you can add the below CSS:

    table.table1, table.table2{
    width:49.8%;
    display: inline-table;
}
    0 讨论(0)
 看不清?
提交回复
热议问题