Jadikan elemen td sama lebarnya dengan elemen input hanya dengan menggunakan css/scss?

Saya telah mencoba menanyakan pertanyaan ini sebelumnya tetapi tidak berhasil, jadi saya akan mencoba menanyakannya lagi. Saya sangat berharap seseorang dapat membantu.

Yang saya inginkan adalah:

  • tabel untuk meregang hingga 100%
  • elemen input pertama yang "mengisi" tabel karena tabel harus 100%
  • elemen input lainnya berada dalam ukuran yang berbeda
  • td harus sama lebarnya dengan elemen masukan (tanpa spasi)
  • untuk mencapai ini hanya dengan mengubah css (tanpa js, tanpa perubahan html)

Dalam cuplikan kode di bawah ini Anda dapat melihat tabel html saya. Saya tidak ingin mengubahnya dengan cara apa pun, dan saya tidak ingin menambahkan kelas apa pun. Saya juga tidak ingin menggunakan javascript apa pun.

Jika Anda menjalankan cuplikan kode, Anda dapat melihat masalah saya. Td jauh lebih lebar daripada elemen input. Saya ingin yang kedua, ketiga dan seterusnya "menyusut" sesuai ukuran elemen input. Saya ingin td pertama direntangkan (karena tabelnya harus 100%).

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #000;
}

.small {
  width: 20px;
}

.medium {
  width: 40px;
}
<table>
<tbody>
  <td>
    <div>
      <input type="text" /> 
    </div>
  </td>
  <td>
    <div>
      <input class="small" type="text" /> 
    </div>
  </td>
  <td>
    <div>
      <input class="medium" type="text" /> 
    </div>
  </td>
  <td>
    <div>
      <input class="medium" type="text" /> 
    </div>
  </td>
</tbody>
</table>

Saya tahu ini bisa diselesaikan dengan mengatur lebar pada elemen td alih-alih input, tapi bukan itu yang saya minta. Saya juga tahu ini bisa diselesaikan dengan mengatur lebar tabel ke otomatis, tapi itu juga bukan yang saya inginkan. Saya hanya ingin elemen td memiliki lebar yang sama dengan elemen input hanya dengan menggunakan css.


html css css-tables
person slowpoke123    schedule 12.09.2016    source sumber

Jawaban (1)


arrow_upward
2
arrow_downward

Apakah ini yang ingin Anda capai? Saya mengatur td dan input pertama menjadi width: 100%; sehingga mereka akan mengisi sisa tabel setelah semua div lainnya adalah lebar elemen di dalamnya (ditetapkan oleh kelas Anda). Dengan box-sizing: border-box Anda dapat mengaturnya sehingga batas dll tidak berpengaruh pada lebar elemen. Anda juga dapat menyetel properti box-sizing hanya ke tabel dan semua elemennya dengan table * { box-sizing: border-box; }.

* {
  box-sizing: border-box;
}
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
}
table td:first-child,
table td:first-child input {
  width: 100%;
}
.small {
  width: 20px;
}
.medium {
  width: 40px;
}
<table>
  <tbody>
    <td>
      <div>
        <input type="text" />
      </div>
    </td>
    <td>
      <div>
        <input class="small" type="text" />
      </div>
    </td>
    <td>
      <div>
        <input class="medium" type="text" />
      </div>
    </td>
    <td>
      <div>
        <input class="medium" type="text" />
      </div>
    </td>
  </tbody>
</table>

person thepio    schedule 12.09.2016