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

从＃t1样式中删除display: inline-block。

由于自动边距，这也会导致表格居中，因此如果您希望表格左对齐，请删除这些。

示例JSFiddle：http://jsfiddle.net/Lrog2pgm/

Answer 2

你的标记很乱......

首先，您正在使用<td>关闭</tr>。

我不知道align-content: center;是什么？我想你的意思是text-align: center;。

您正在2个选择器上共享#id（id =＆＃39; tr1＆＃39;）。不允许。

首先尝试修复其中一些内容。

Answer 3

在您的代码中，您不会关闭<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*/

Answer 4

首先你的代码是一团糟。它有不匹配的标签，只是一起混乱。其次，永远不要再使用表格了。他们几乎被弃用了。这些天你可以用列表完成你用表做的所有事情。表甚至没有响应。就像你已经发现的那样，他们很有气质。我的回答：使用<ul>

获取表格行以跨越整个宽度

4 个答案: