Question

在JavaScript中，为所有列设置了一个样式宽度值，我无法逐个调整它们的大小。我需要逐个调整列的大小，而不是一次调整所有列：

<table class="table table-striped table-bordered dataTable" id="detailed">
    <thead>
    <tr>
        <th>C1</th>
        <th>C2</th>
        <th>C3</th> 
        <th>C4</th>
        <th>C5</th>
        <th>C6</th>
    </tr>
    </thead>
    <tfoot>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    </tfoot>
    <tbody>
    {% for col in cols %}
                <tr>
                    <td>{{  col.name1 }}</td>
                    <td>{{  col.name2 }}</td>
                    <td>{{  col.name3 }}</td>
                    <td>{{  col.name4 }}</td>
                    <td>{{  col.name5 }}</td>
                    <td>{{  col.name6 }}</td>             
                </tr>
    {% endfor %}
    </tbody>
</table>

Answer 1

使用nth-child更改单个列的宽度。 JSFiddle

tr>td:nth-child(1){
  width:100px;
}

tr>td:nth-child(4){
  width:450px;
}

Answer 2

您必须为标签分配一个id（或类，如果您想更改某些单元格而不是全部。）。然后当然使用普通的CSS来改变宽度，高度或填充等。

PS。在我的手机上，很难提供任何示例代码。随意建议编辑。

Answer 3

添加到表格

width: 100%

接下来，你可以为每个TH添加这样的东西：

<th style="width: 10%; padding: 5px;">C1</th>

或（我认为最佳选择）添加到课堂并设置css

<th class="nameClass">C2</th>

样式CSS：

.nameClass {
  width: 10%; // could be other value in px, inc etc.
  padding: 5px;
}

更好的选择来自以下用户：P

如何单独更改每列的宽度？

3 个答案: