Question

我有一张桌子，在＆lt; td＆gt;我有一些输入和选择。并且当＆lt; option＆gt; in＆lt; select＆gt;有一个很长的文本 - 它扩展＆lt; td＆gt;，所以它破坏了表。通常在表td = th内容长度，并且td的最小宽度= th中最大单词的长度。如果我将宽度设置为td或th - 它不起作用，只需选择宽度。但是我在选项中有动态内容，因此为它制作静态宽度会很糟糕。我怎样才能让那个选择没有扩展td并且同样如此？ Plnkr的例子

Answer 1

由于表格元素按其内容增长，你需要给它们一个宽度，所以如果你像这样更新你的CSS它会起作用

table {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 25%;
}
td select {
  width: 100%;
}

示例代码段

＆＃13;

table th, table td {
  border:1px solid grey;
}
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 25%;
}
td select {
  width: 100%;
}

＆＃13;

    <table>
      <thead>
        <tr>
          <th>Group Name</th>
          <th style='width:50px'>Members</th>
          <th>Genre</th>
          <th>From</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>
            <select>
              <option>Red Hot Chili Peppers</option>
              <option>Depeche Mode</option>
              <option>very-very-very long text, it will be crush the table</option>
            </select>
          </td>
          <td>
            <select>
              <option>4</option>
              <option>3</option>
              <option>very-very-very long text, it will be crush the table</option>
            </select>
          </td>
          <td>
            <select>
              <option>funk-rock/rock/alternative</option>
              <option>Synthpop/new-wave</option>
              <option>very-very-very long text, it will be crush the table</option>
            </select>
          </td>
          <td>
            <select>
              <option>USA</option>
              <option>UK</option>
              <option>very-very-very long text, it will be crush the table</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>

＆＃13;

Answer 2

将宽度应用于选择元素：

<select style="width:50px;"></select>

使用长文本字段<select>，压缩表格

2 个答案: