Twitter Bootstrap表宽度全宽但内容居中

时间:2013-05-15 06:15:18

标签: html css twitter-bootstrap html-table

我有一个这样的表(包括bootstrap):

<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>

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

我无法在此处上传图片,所以我已在其他地方完成了这项工作:

See image for more description

3 个答案:

答案 0 :(得分:7)

我只显示了两行(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

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

答案 1 :(得分: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>

答案 2 :(得分:1)

请根据您的图片进行检查

<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%;}