Question

我已经构建了下表：

    <table id="viewConfigurationTable" style="width:700px">
    <tr>
        <td style="width:100px">Id</td>
        <td style="width:100px">Name</td>
        <td style="width:200px">Status</td>
        <td style="width:300px">Ctids</td>
        <td style="width:300px">CreationDate</td>
    </tr>

    <% foreach (var config in Model.AliveConfigurations)
       {
    %>
    <tr>
        <td><%=config.Id%></td>
        <td><%=config.Name%></td>
        <td><%=config.Status%></td>
        <td><%=config.Ctids%></td>
        <td><%=config.CreationDate%></td>

    </tr>
    <%
        }
    %>
</table>

然而Ctids列有时会变宽。

我该如何解决这个问题？

Answer 1

从我的角度来看，表格宽度“不可用”，您可以尝试将它们设为div。

但是如果您确实需要修复表格，请更改TD的宽度以匹配表格宽度，将table-layout:fixed添加到表格作为样式并将TD设置为中断单词：word-wrap:break-word。

jsFiddle Example

Answer 2

试试这个：

   <style type="text/css">
    table {
      width: 25%;//use this value for the table size compared to the screen size.
    }
    table td {
      width:auto;
      border: 1px solid red;
    }
  </style>

    <table id="viewConfigurationTable">
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Status</td>
            <td>Ctids</td>
            <td>CreationDate</td>
        </tr>

        <% foreach (var config in Model.AliveConfigurations)
           {
        %>
        <tr>
            <td><%=config.Id%></td>
            <td><%=config.Name%></td>
            <td><%=config.Status%></td>
            <td><%=config.Ctids%></td>
            <td><%=config.CreationDate%></td>

        </tr>
        <%
            }
        %>
    </table>

看here

限制html中的列宽

2 个答案: