CSS：内部textarea用于100％表格

Question

当前

我有一个100％宽的表格，其中包含2列，其中有一个文本区域，用户可以在其中输入文本。

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  table-layout: fixed;
}

th,
td {
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

.container {}

.text-area {
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <textarea class="text-area">This is a short piece of text.
            </textarea>
        </div>
      </td>
      <td>
        <div class="container">
          <textarea class="text-area">This is a long piece of text, which ultimately should be displayed as a minimum with a width of 250 px
            </textarea>
        </div>
      </td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/qvr2b8pu/3/

问题

我希望文本区域动态调整为屏幕宽度，并保持周围单元格的边距恒定，例如10px <-根据此示例。

目标：

如果可以达到期望的结果，我想保持表和div的结构不变。

Answer 1

这里不需要任何复杂的东西。您仅遇到了经典的盒子模型问题，其中总宽度包括左右填充和边框以及指定的宽度。 box-sizing属性可用于切换到备用框模型，其中width属性是总宽度。

textarea {
    box-sizing: border-box;
}

Answer 2

只需将display:flex用于container，然后将边距用于textarea。希望该解决方案对您有所帮助。

table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid black;
    table-layout: fixed;
}

th,
td {
    text-align: center;
    border: 1px solid black;
    padding: 5px;
}

.container {
    display: flex;
}

.text-area {
    width: 100%;
    margin: 5px;
}

<table>
    <tbody>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
        <tr>
            <td>
                <div class="container">
                    <textarea class="text-area">This is a short piece of text.
                    </textarea>
                </div>
            </td>
            <td>
                <div class="container">
                    <textarea class="text-area">This is a long piece of text, which ultimately should be displayed as a minimum with a width of 250 px
                    </textarea>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 3

您只需要box-sizing:border-box到textarea，因为默认情况下它不是边框，它会通过div / td。谢谢！

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  table-layout: fixed;
}

th,
td {
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

.container {}

.text-area {
  width: 100%;
  box-sizing: border-box;
}

<table>
  <tbody>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <textarea class="text-area">This is a short piece of text.
            </textarea>
        </div>
      </td>
      <td>
        <div class="container">
          <textarea class="text-area">This is a long piece of text, which ultimately should be displayed as a minimum with a width of 250 px
            </textarea>
        </div>
      </td>
    </tr>
  </tbody>
</table>