发表新帖
发表新帖

HTML — Two Tables Horizontally Side by Side

后端 未结
关注
9 501
野趣味
野趣味 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:48 
    <!DOCTYPE html>

<html>
<head>
<title>tables sideXside2</title>
<style>

table, td  { border-width: 2px; border-style: solid; border-collapse: collapse; padding: 15px; color: #000000; text-align: center; }

table.pos_fixed1 { position:fixed; top:30px; left:10px; }

table.pos_fixed2 { position:fixed; top:30px; left:250px; }

table.pos_fixed3 { position:fixed; top:30px; left:490px; }

</style>

</head>
<body>

<table summary="" width="10%" class="pos_fixed1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

<table summary="" width="10%" class="pos_fixed2">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>

<table summary="" width="10%" class="pos_fixed3">
<tr><td>i</td><td>ii</td><td>iii</td></tr>
<tr><td>iv</td><td>v</td><td>vi</td></tr>
<tr><td>vii</td><td>viii</td><td>ix</td></tr>
</table>

</body>
</html>
    0 讨论(0)
  • 情话喂你
    2020-11-30 10:51

    Add:

    fieldset
{
    float: left;
}

    to your CSS. I copied your HTML to http://jsfiddle.net/S3n6D/ and added that CSS. You can see the result there.

    0 讨论(0)
  • 别跟我提以往
    2020-11-30 10:52

    I think you're missing a few lines of HTML from the start of your copy and paste, however what you'll want to do is add a float:left to the CSS of the first fieldset.

    0 讨论(0)
 看不清?
提交回复
热议问题