Saya ingin lebar elemen span menjadi sisa lebar td.

Berikut adalah contoh yang sangat sederhana. Dengan kata lain, sekarang saya memiliki beberapa kode, tetapi elemen span akan terlalu lebar. Ini akan membahas elemen td terbaru.

Berikut adalah kode HTML yang memiliki beberapa kode CSS dasar juga. Saya tidak diizinkan untuk mengubah struktur dasar tabel ini. Yang ingin saya lakukan hanyalah memodifikasi elemen span saya.

<table style="width:100%;">
  <tr>
    <td style="width:30px;">1</td>
    <td><a href="go.htm">Go</a> <span style="display:inline-block;width:100%;background-color:black;">to...</span></td>
    <td>#</td>
  </tr>
</table>

Bagaimana saya harus memodifikasi elemen span untuk membuatnya menggunakan sisa td tetapi tidak lebih?

1
xms 12 Maret 2017, 15:47

2 jawaban

Jawaban Terbaik

Inilah solusi saya sendiri untuk masalah saya. Ini adalah cara terbaik yang bisa saya temukan.

<table style="width:100%;">
  <tr>
    <td style="width:30px;">1</td>
    <td style="padding-left:65px;"><a href="go.htm" style="position:absolute;left:45px;margin-top:-2px;">Go</a> to...</td>
    <td>#</td>
  </tr>
</table>
0
xms 12 Maret 2017, 14:31

Ini dapat dicapai dengan menggunakan kotak fleksibel

td div {
  display: flex;
}

td span {
  flex-grow: 1;
}
<table style="width:100%;" border=1>
  <tr>
    <td style="width:30px;">1</td>
    <td>
      <div>

        <a href="go.htm">Go</a> <span style="background-color:black;">to...</span>
      </div>
    </td>
    <td>#</td>
  </tr>
</table>
2
Chiller 12 Maret 2017, 12:58