twitter-bootstrap Twitter Bootstrap 表格宽度全宽但内容居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16558067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap table width full width but content centered
提问by wottpal
I have a table like this (included 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>
I want the table lines over the full width of it's container but the two cells with header and content should be centered.. I've tried to describe it in an image:
我想要表格线在它的容器的整个宽度上，但带有标题和内容的两个单元格应该居中。我试图在图像中描述它：
I cant upload the image here, so I've done it somewhere else:
我不能在这里上传图片，所以我已经在其他地方上传了：
回答by Dinesh Kumar Shaw
I have shown only two rows (tr). You can add as many rows as you want.
我只显示了两行 ( tr)。您可以根据需要添加任意数量的行。
HTML:
HTML：
<table class="table table-hover">
<tbody>
<tr>
<td> </td>
<td>Head1</td>
<td>content1</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Head2</td>
<td>content2</td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
CSS：
table.table.table-hover{ width:100%; }
table.table.table-hover tr td{ width:25% }
Hope you will find this useful :)
希望你会发现这很有用:)
回答by The Mechanic
Here is the code you can try this let me know if you have any issue css
这是您可以尝试的代码，如果您有任何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> </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>
回答by The Mechanic
Please check this also according to your image
也请根据您的图片进行检查
<table class="table table-hover" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="wid2"> </td>
<td class="wid1">Head1</td>
<td class="wid1">content1.1</td>
<td class="wid2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>content1.2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>content1.3</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Head2</td>
<td>content2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Head3</td>
<td>content3</td>
<td> </td>
</tr>
</tbody>
</table>
and this is css
这是 css
table.table tr td{border-bottom:1px solid #000;}
.wid1{width:20%;}
.wid2{width:30%;}
