Question

我收到了这段代码：

<table>
    <tr>
        <td>PeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
        <td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
</table>


table {
    margin: 0 auto;
    border-spacing: 15px;
    width: 70%;
    min-height: 250px;
}

td {
    padding: 10px;
    background-color: gray;
}

我想将表格设置为我所做的总窗口宽度的70％。我还希望td在表格中占70％的50％，td宽度应该是静态的。

您可以看到问题here

Answer 1

您的代码无法正常工作的唯一原因是由于巨大的单个字符串。

添加以下内容以使其中断，并保持正确的宽度：

td {
    background-color: #808080;
    padding: 10px;
    width: 50%;
    max-width: 50%; /* to limit the width to 50% as well */
    word-break: break-all; /* cause any string that is too long to be broken so will fit */
}

这是一个小提琴供您参考：http://jsfiddle.net/9ftqy/

Answer 2

设置表格布局：固定;表和修复你的问题

小提琴http://jsfiddle.net/S37BB/

新css

table {
    margin: 0 auto;
    border-spacing: 15px;
    width: 70%;
    min-height: 250px;
    table-layout:fixed;
}

td {
    padding: 10px;
    background-color: gray;
    width:50%;
    overflow:hidden;
}

HTML

<table>
    <tr>
        <td>PeterPeterPeterPeterPete rPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
        <td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
</table>

Answer 3

您应该从代码中了解一些事情......

TD宽度应始终固定为50％---但正常趋势是重新调整其中每个内容的单元格大小。

表{ table-layout：fixed; }

td { 宽度：50％; }

您希望强制单元格内容在提供的空间内包装，而不是在＃1完成后溢出。

td { 自动换行：break-word; }

这是完整的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Fixed Table</title> <STYLE TYPE="text/css"> table { margin: 0 auto; border-spacing: 15px; width: 70%; min-height: 250px; table-layout: fixed; } td { padding: 10px; background-color: gray; width: 50%; word-wrap: break-word; } </STYLE> </head> <body> <table> <tr> <td>PeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td> <td>GriffinGriffinGriffinGriffinGriffinGriffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> </body> </html>

希望这会对你有所帮助。

阿肖克

将表设置为70％但是td为50％？

3 个答案: