Twitter Bootstrap 表格宽度全宽但内容居中答案

【问题标题】：Twitter Bootstrap table width full width but content centeredTwitter Bootstrap 表格宽度全宽但内容居中
【发布时间】：2013-05-09 14:42:30
【问题描述】：

我有一张这样的表（包括引导程序）：

<table class="table table-hover">
   <tbody>
      <tr><td>Head1</td><td>content1.1</td></tr>
      <tr><td></td><td>content1.2</td></tr>
      <tr><td></td><td>content1.3</td></tr>
      <tr><td>Head2</td><td>content2</td></tr>
      <tr><td>Head3</td><td>content3</td></tr>
   </tbody>
</table>

我希望表格线在其容器的整个宽度上，但带有标题和内容的两个单元格应该居中。我试图在图像中描述它：

我不能在这里上传图片，所以我在别的地方做了：

【问题讨论】：

到目前为止你尝试过什么？
试图按宽度修复，看看我下面的答案
已经只有两列了！
那你想要什么？你想要四列？如果是，请告诉我，然后您可以在下表中再添加两个 td，并按宽度排列，这样就可以了
是的，如果你想要我需要四列，但即便如此，我如何调整两个空的额外列以使我的中间 2 列居中

标签： html css twitter-bootstrap html-table

【解决方案1】：

这是您可以尝试的代码，如果您有任何问题，请告诉我 css

.wid50{width:50%;}


<table class="table table-hover" width="100%" cellpadding="0" cellspacing="0">
   <tbody>
      <tr>
         <td class="wid50">Head1</td>
         <td class="wid50">content1.1</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>content1.2</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>content1.3</td>
      </tr>
      <tr>
        <td>Head2</td>
        <td>content2</td>
      </tr>
      <tr>
        <td>Head3</td>
        <td>content3</td>
      </tr>
   </tbody>
</table>

【讨论】：

注意：不要使用width 属性，因为它已被弃用：应该使用 CSS 定义规则和设置样式。改用 CSS 属性宽度。阅读：developer.mozilla.org/en-US/docs/Web/HTML/Element/table
是的，我们可以通过 css 做到这一点
我回答了两次，因为我不明白他想要什么，所以我把这两个条件都放在他面前

【解决方案2】：

请根据您的图片也检查一下

<table class="table table-hover" width="100%" cellpadding="0" cellspacing="0">
   <tbody>
      <tr>
        <td class="wid2">&nbsp;</td>
        <td class="wid1">Head1</td>
        <td class="wid1">content1.1</td>
        <td class="wid2">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>content1.2</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>content1.3</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
      <td>&nbsp;</td>
        <td>Head2</td>
        <td>content2</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Head3</td>
        <td>content3</td>
        <td>&nbsp;</td>
      </tr>
   </tbody>
</table>

这是css

table.table tr td{border-bottom:1px solid #000;}
.wid1{width:20%;}
.wid2{width:30%;}

【讨论】：

这很酷，但你能修改一下内部两列不固定为 20%。我希望它们与列中最大的项目一样大。而且中间的两列仍然应该居中。
我回答了两次，因为我不明白他想要什么，所以我把这两个条件都放在他面前

【解决方案3】：

我只显示了两行 (tr)。您可以添加任意数量的行。

HTML：

    <table class="table table-hover">
   <tbody>
      <tr>
         <td>&nbsp;</td>
         <td>Head1</td>
         <td>content1</td>
         <td>&nbsp;</td>
      </tr> 
      <tr>
         <td>&nbsp;</td>
         <td>Head2</td>
         <td>content2</td>
         <td>&nbsp;</td>
      </tr>      
   </tbody>
</table>

CSS：

table.table.table-hover{ width:100%; }
table.table.table-hover tr td{ width:25% }

DEMO

希望你会发现这很有用:)

【讨论】：