Question

我有下表：

哪种方法很好，但只要我在第4列输入更长的描述，按钮就会搞砸（它们叠加在一起）。

我尝试将宽度和最大宽度设置为百分比：

<td style="max-width=10%">Winter</td>
<td style="max-width=10%">2014-12-01</td>
<td style="max-width=10%">2015-02-01</td>
<td style="max-width=40%">some text</td>
<td style="max-width=30%"><button class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Update</button><a href="#" class="btn btn-info"><span class="glyphicon glyphicon-trash"></span>Delete</a></td>

但这没有效果。我只是希望描述中的文本在其边界内包装（我尝试自动换行也没有成功），然后向下而不是传播并弄乱按钮。

有人有任何建议吗？

EDIT1 我应该强调，这需要在某种程度上保持可扩展性。

Answer 1

你可以像这样用css。以固定15%宽度控制您的th，最后一个宽度为40%。或者您可以根据表格的每一列确定所需的百分比。

table {
  table-layout:fixed;
}
th {
  width:15%;
}
th:last-of-type {
  width:40%;
}

Answer 2

看看以下内容。我给了td固定的宽度和它的包装。

FIDDLE

<强> HTML

    <table class="table table-striped">


        <thead>
            <tr>
                <th class="panel-heading panel-heading-h2"><h4>Season name</h4></th>
                <th class="panel-heading panel-heading-h2"><h4>Season start date</h4></th>
                <th class="panel-heading panel-heading-h2"><h4>Season end date</h4></th>
                <th class="panel-heading panel-heading-h2"><h4>Description</h4></th>
                <th class="panel-heading panel-heading-h2"><h4>Action</h4></th>
            </tr>
        </thead>


            <tbody><tr>
                <td>Winter</td>
                <td>2014-12-01</td>
                <td>2015-02-01</td>
                <td>Small text</td>
                <td>


                    <button class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Update</button>                  
                    <a href="#" class="btn btn-info"><span class="glyphicon glyphicon-trash"></span>  Delete</a> 
                </td>
            </tr>

            <tr>
                <td>MidApril-EarlyJune</td>
                <td>2015-04-14</td>
                <td>2015-06-04</td>
                <td style=width:100px>Also small textAlso small texAlso small texAlso small textAlso small texAlso small texAlso small textAlso small texAlso small texAlso small textAlso small texAlso small tex</td>
                <td>


                    <button class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Update</button>                  
                    <a href="#" class="btn btn-info"><span class="glyphicon glyphicon-trash"></span>  Delete</a> 
                </td>
            </tr>

            <tr>
                <td>May-July</td>
                <td>2015-05-11</td>
                <td>2015-07-14</td>
                <td>Short text</td>
                <td>


                    <button class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Update</button>                  
                    <a href="#" class="btn btn-info"><span class="glyphicon glyphicon-trash"></span>  Delete</a> 
                </td>
            </tr>

    </tbody></table>

Answer 3

只需为包含按钮的表格单元格提供精确的像素宽度，以便它们有足够的空间。

我如何整理桌子？

3 个答案: