如何在HTML表格中设置相同的列？

Question

如何在HTML表格中设置相同的列？

3

我是一名有用的助手，可以为您翻译文本。

我正在尝试制作相同列大小的表格...但如果内容超过列大小，自动增加...为什么会这样？

这是我的HTML代码：

    <!DOCTYPE html>
    <html>
    <head>
    <style>
   table {
        background-color: #eaeaea;
        width : 80%;
        border: 1px solid ; 
    }
     td {

        width : 20%;
        border: 1px solid ; 
    }
    </style>
    </head>
    <body>
   <table>
    <tr>
        <td>Alfreds hrtfjfgjkfgAlfreds hrtfjfgjkfgAlfreds hrtfjfgjkfgAlfreds hrtfjfgjkfgAlfreds </td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>GermanyGermanyGermanyGermanyGermanyGermany</td>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td></td>
        <td></td>
      </tr>
</table>
 </body>
  </html>

这是我的输出：

- JYOTI SAPARIYA

尝试在你的 CSS 中使用 max-width:20%; 和 min-width:20%。 - DanielPanic

我尝试过了，但问题仍然存在。 - JYOTI SAPARIYA

好的，我已经有一段时间没有接触HTML了，但你想要实现的东西非常复杂。请查看这个Fiddle https://jsfiddle.net/1tdfkb4c/1/。即使您设置了固定宽度，它也会偏离轨道。表格需要是动态的，让我们诚实点，不会有很长的单词，因为问题在于HTML本身无法打破太长的单词（就像我们使用“-”写作时所做的那样）。请查看此链接https://dev59.com/uXA75IYBdhLWcg3w3NLf，它可能会对你有所帮助 :) - DanielPanic

1

我能理解单词不会很大，但如果单词被替换成链接，那么列的大小就会增加...即使单词很小，列的大小也会减小。 - JYOTI SAPARIYA

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iStepashka · Accepted Answer

将table设置为table-layout:fixed，将单元格设置为word-wrap。

像这样：

table {
    background-color: #eaeaea;
    width : 80%;
    border: 1px solid ; 
    table-layout: fixed;
}
 td {

    width : 20%;
    border: 1px solid ; 
    word-wrap: break-word;
}