如何使用CSS隐藏HTML表中的某些表列

Question

我有一个html表,如下所示

<table class="report">
    <tbody>
      <tr>
        <td >col1</td>
        <td >col2</td>
        <td>col3</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
      <tr>
        <td>R2</td>
        <td >2/17</td>
        <td >{2/17}</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
    </tbody>
</table>

如您所见,在col3之后,所有后续列都为空.我只想显示前三列并隐藏其余列.我怎样才能使用CSS实现这一目标.我没有控制HTML表,所以我无法修改它.

谢谢

Answer 1

你确实可以这样做:

http://jsfiddle.net/nEQ6g/1/

*编辑 - 据我所知nth-child,visability: hidden不要在一起玩得很好.display: none;根据我提供给您的代码,您需要使用它.

CSS:

table{
    border-collapse: collapse;
}

table tr td{
    padding: 10px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

table tr td:nth-child(n+4){
    display: none;
}