Question

我想知道是否有某种方法以某种方式将表格中的所有inline-css传输到CSS文件？我想这需要单独识别每个<td>，但怎么办呢？（也许它可以像<td1> <td2>那样使用？

HTML：

<div class="main">

    <table class="tableBot">
                    <thead>
                        <tr>
                            <th width="507" style="text-align:left">Topic</th>
                            <th width="77" style="text-align:center">Responses</th>
                            <th width="0" style="text-align:center; ">Last message</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td width="507" style="text-align:left; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;">FoofffffffftetadfgdfgdfgdfgstafgstFooffffffghfghfghfghfghfftetastastFoofffffffffffftetastast</td>
                            <td width="77" style="text-align:center">329</td>
                            <td width="100" style="text-align:center">Jonas</td>
                            <td width="110" style="text-align:center">19-03-2014 13:37</td>
                        </tr>
                        <tr>
                            <td width="507" style="text-align:left">Bar</td>
                            <td width="77" style="text-align:center">16</td>
                            <td width="100" style="text-align:center">Untanas</td>
                            <td width="110" style="text-align:center">19-03-2014 13:37</td>
                        </tr>
                        <tr>
                            <td width="507" style="text-align:left">Foo</td>
                            <td width="77" style="text-align:center">28</td>
                            <td width="100" style="text-align:center">Petras</td>
                            <td width="110" style="text-align:center">19-03-2014 13:37</td>
                        </tr>
                        <tr>
                            <td width="507" style="text-align:left">Bar</td>
                            <td width="77" style="text-align:center">324</td>
                            <td width="100" style="text-align:center">Untanas</td>
                            <td width="110" style="text-align:center">19-03-2014 13:37</td>
                        </tr>
                        <tr>
                            <td width="507" style="text-align:left">Bar</td>
                            <td width="77" style="text-align:center">111</td>
                            <td width="100" style="text-align:center">Jonas</td>
                            <td width="110" style="text-align:center">19-03-2014 13:37</td>
                        </tr>
                        <tr>
                            <td width="507" style="text-align:left">Bar</td>
                            <td width="77" style="text-align:center">546</td>
                            <td width="100" style="text-align:center">Untanas</td>
                            <td width="110" style="text-align:center">19-03-2014 13:37</td>
                        </tr>
                        <tr>
                            <td width="507" style="text-align:left">Bar</td>
                            <td width="77" style="text-align:center">1</td>
                            <td width="100" style="text-align:center">Jonas</td>
                            <td width="110" style="text-align:center">19-03-2014 13:37</td>
                        </tr>
                        <tr>
                            <td width="507" style="text-align:left">Bar</td>
                            <td width="77" style="text-align:center">97</td>
                            <td width="100" style="text-align:center">Petras</td>
                            <td width="110" style="text-align:center">19-03-2014 13:37</td>
                        </tr>
                    </tbody>
                </table>


</div>

CSS：

.main{
    margin:0 auto;
    width:1150px;
    font-size:16;
}

.content{

}

.tableBot{
    table-layout:fixed;
    border-collapse:collapse;
    font-size:14px;
    width:795px;

}

.tableBot th{
    background:rgb(229,229,229);
    color:#555555;
}

.tableBot td{
   border:1px solid rgb(229,229,229); 

}
.tableBot tbody tr:nth-child(even){
    background-color:rgb(229,229,229);

}

.tableBot tbody{
    color:#555555;

}

Answer 1

首先，你可以给最后一个colspan，你不能用css做。

另外，将syling移动到css实际上很容易。

您可以使用td：first-child和td：nth-child（）这样的伪选择器

table tr td:firstchild{width: 507px; text-align: left;}
table tr td:nth-child(2){ width: 77px; text-align:center;}

从那里开始

从HTML部分移动表inline-css

1 个答案: