防止子div溢位父divcss/tailwindcss-有解無憂

我有一個帶有子 div 的 div。這個子 div 有幾個嵌套在 html 表中的輸入欄位（目前）。我的問題是子 div 上的輸入欄位溢位父容器 div。

我的目標是擁有子 div，因此內容永遠不會在不添加滾動條的情況下溢位父 div。我已經嘗試了多個 'overflow-xx' 屬性，但這只是隱藏了內容并添加了一個滾動條。

這是我的代碼：

<div class="p-10 w-5/12 text-center">
  <div class="border-2 border-solid border-indigo-300 p-3 rounded shadow-2xl">
    <h2>Spielfeld 1</h2>
    <div class="h-96 border border-solid border-indigo-300 rounded flex">
      <div class="w-full">
        <table>
          <tr>
            <th>Name</th>
            <th>Runter</th>
            <th>Frei</th>
            <th>Hoch</th>
            <th>Neiba</th>
          </tr>
          <tr>
            <td>1</td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

這是問題的螢屏截圖：

防止子 div 溢位父 div css/tailwindcss

uj5u.com熱心網友回復：

您應該能夠通過向您的table和input控制元件添加一些 CSS 來實作這一點。

適用width: 100%于故事和輸入控制元件。然后您可以使用table-layout: fixed和box-sizing: border-box來調整容器內的控制元件和表格的大小。

/* ignore .w-full css - it's used to set the width for this demo */
.w-full {
  width: 600px;
  border: 1px solid green;
}

table {
  table-layout: fixed;
  width: 100%;
}

td input {      
  box-sizing: border-box;
  width: 100%;
}

<div class="p-10 w-5/12 text-center">
  <div class="border-2 border-solid border-indigo-300 p-3 rounded shadow-2xl">
    <h2>Spielfeld 1</h2>
    <div class="h-96 border border-solid border-indigo-300 rounded flex">
      <div class="w-full">
        <table>
          <tr>
            <th>Name</th>
            <th>Runter</th>
            <th>Frei</th>
            <th>Hoch</th>
            <th>Neiba</th>
          </tr>
          <tr>
            <td>1</td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/393867.html

標籤：html css 顺风-css

上一篇：難以掌握flex

下一篇：如何在不丟失樣式的情況下復制文本？