asp.net - 限制html中的列宽

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's 的宽度以匹配表格宽度，table-layout:fixed作为样式添加到表格中并设置TD's 来断词：word-wrap:break-word.

jsFiddle 示例

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>

看这里