html - 使表格行跨越整个宽度

Question

我只是想让我的表格行一直穿过表格，但它只填充左侧的大约 20%。

<table id="t1" style="width:25%; height:50%">
<tr id="tr1">
  <td id="user1"></td>
  <td id="champ1"></td>
  <td id="wr1"></td>
</tr>
</table>

稍后我将值放入脚本的数据单元格中。 这是 CSS。

#t1 {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}
tr {
  width: 100%;
  align-content: center;
}

Answer 1

在您的代码中，您没有关闭 <td>的，你们每个人都以结束 </tr> 结束反而。如果<td>中没有内容，添加 

如果删除 <tr> ，表行 ( display: inline-block ) 将默认为表的 100% ，并正确终止它们。将它们包裹在一些东西中以使它们漂浮。这使您有机会为表格添加标题或添加控件。

我建议使用 html:

<div class="wrapper">
  <div class="left">
    <table id="table1">
     <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
     </tr>
    </table>
  </div>
  <div class="right">
   <table id="table2">
     <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
     </tr>
   </table>
  </div>
</div>

CSS:

/* Optionally throw in a media query, so the floats only happen if there is enough room for the two tables next to each other, but seamlessly fall under each other if not -- @media screen and (min-width: 600px){*/
.left{float:left; width:50%;}
.right{float:right; width:50%;}
/* } Optionally, close the media query here. */
/* Keep the wrapper open until both tables are done*/
.wrapper:after{clear:both;} 
table{}
/* Add margin if the tables get to close, or negative margin if you want them closer*/