Fix tabel line

saya memiliki tabel yang dibangun dengan HTML dan PHP untuk me-render data dari basis data, tetapi anehnya garis tabel tidak sesuai alias tidak pas, uniknya pada bagian kiri setting level baris atas dan bawah sesuai, tetapi pada bagian kanan setting level garis tidak sesuai dan jarak ke-tidakpas-annya justru bertambah, begini gambarnya gambar tabel

dan ini kode tabel HTML pada bagian heading:

<thead>
                    <tr>
                      <th width="5%">Style Number</th>
                      <th width="5%" class="avatar">Picture</th>
                      <th width="5%">Karat</th>
                      <th width="5%">Metal &nbsp; Color &nbsp;</th>
                      <th colspan="4" width="20%">Diamond Info</th>
                      <th width="5%">Setting Level</th>
                      <th width="5%">Setting Cost</th>
                      <th width="5%">Diamond Carat</th>
                      <th width="5%">Diamond Cost</th>
                      <th width="5%">Stone Cost</th>
                      <th width="5%">MOP Cost</th>
                      <th width="5%">Miracle Cost</th>
                      <th width="5%">Total Weight</th>
                      <th width="5%">Stone Weight</th>
                      <th width="5%">Chain Weight</th>
                      <th width="5%">Wire Weight</th>
                      <th width="5%">Parts Weight</th>
                      <th width="5%">Wire Cost</th>
                      <th width="5%">Gold Weight</th>
                      <th width="5%">Gold Cost</th>
                      <th width="5%">Labor/gr</th>
                      <th width="5%">Labor Cost</th>
                      <th width="5%">Total Cost</th>
                      <th>#</th>
                    </tr>
                  </thead>

dan ini adalah potongan kode untuk menampilkan datanya:

$tabel .=  '<tr id="row-' . $j . '" class="ok row-content ' . $strip . ' row-' . $j . '" >
            <td width="5%" rowspan="' . $rowspan . '" id="style_no" contenteditable="true">' . $p->style_no . '</td>
            <td width="5%" class="avatar" rowspan="' . $rowspan . '"><a href="' . base_url() . 'assets/foto_product/' . $p->picture . '" data-fancybox="images" data-caption="Style Number:' . $p->style_no . '"><img width="50px" height="50px" src="' . base_url() . 'assets/foto_product/' . $p->picture . '" onError="this.onerror=null;this.src=\'' . base_url() . 'no_image.png\';"></a></td>
            <td width="5%" rowspan="' . $rowspan . '">' . cmb_dinamis_2('karat', 'master_size', 'size', 'id', $p->karat_id, 'change_karat', 'karat-' . $j, $p->id) . '</td>
            <td width="5%" rowspan="' . $rowspan . '">' . select_metal_color('metal_color', $p->metal_color, $j, $p->id) . '</td>
            
            <td width="5%">' . $s->shape . '</td>
            <td width="5%">' . $s->text_size . '</td>
            <td width="5%">' . select_stone_color("stone_color[]", $s->color, $j . '-' . $i, $stonecolorcost, $s->stoneid, $j) . '</td>
            <td width="5%">' . $s->quantity . '</td>
            
            <td width="5%">' . $s->setting_level . ' </td>
            <td width="5%"  rowspan="' . $rowspan . '"> <span class="btn btn-xs bg-gray">$ [setting_cost] </span></td>
            <td width="5%" rowspan="' . $rowspan . '" >[diamond_carat] ct </td>
            <td width="5%" rowspan="' . $rowspan . '"><span class="btn btn-xs bg-gray" id="diamondcost-' . $j . '">$ [diamond_cost] </span></td>
            <td width="5%" rowspan="' . $rowspan . '"><span class="btn btn-xs bg-gray" id="diamondcost-' . $j . '">$ [diamond_cost] </span></td>
            <td width="5%" rowspan="' . $rowspan . '"><span class="btn btn-xs bg-gray" id="diamondcost-' . $j . '">$ [diamond_cost] </span></td>
            <td width="5%" rowspan="' . $rowspan . '"><span class="btn btn-xs bg-gray" id="diamondcost-' . $j . '">$ [diamond_cost] </span></td>
            <td width="5%" rowspan="' . $rowspan . '" >[total_weight]</td>
            <td width="5%" rowspan="' . $rowspan . '">[stone_weight] </td>
            <td width="5%" rowspan="' . $rowspan . '">' . desimal($chain_weight, 2) . ' </td>
            <td width="5%" rowspan="' . $rowspan . '">' . desimal($p->wire_weight, 2) . ' </td>
            <td width="5%" rowspan="' . $rowspan . '"  >' . desimal($p->parts_weight, 2) . ' </td>
            <td width="5%" rowspan="' . $rowspan . '"  ><span class="btn btn-xs bg-gray"> $ ' . desimal($wire_cost, 2) . ' </span></td>
            <td width="5%" rowspan="' . $rowspan . '"  > [gold_weight] </td>
            <td width="5%" rowspan="' . $rowspan . '"  ><span class="btn btn-xs bg-gray"> $ [gold_cost] </span></td>
            <td width="5%" rowspan="' . $rowspan . '"  >$ [labor_pergram]</td>
            <td width="5%" rowspan="' . $rowspan . '" ><span class="btn btn-xs bg-gray">$ [labor_cost] </td>
            <td width="5%" rowspan="' . $rowspan . '" ><span class="btn btn-xs bg-red" id="totalcost-' . $j . '">$ [total_cost]</span></td>
            <td width="" rowspan="' . $rowspan . '"  >[formorder]</td>
          </tr>';
                            } else {
                              $formorder .= '<input type="hidden" name="stone_id[]"  id="stoneid-' . $j . '-' . $i . '" value="' . $s->stoneid . '">
             <input type="hidden" name="diamondcost[]" class="diamondcost-' . $j . '" id="idiamondcost-' . $j . '-' . $i . '" value="' . round($dcost, 2) . '">';
                              $tabel .=  '<tr id="row-' . $j . '" class="ok ' . $strip . ' row-' . $j . '">
            <td width="5%">' . $s->shape . ' </td>
            <td width="5%">' . $s->text_size . '</td>
            <td width="5%">' . select_stone_color("stone_color[]", $s->color, $j . '-' . $i, $stonecolorcost, $s->stoneid, $j) . '</td>
            <td width="5%">' . $s->quantity . '</td>
            <td width="5%">' . $s->setting_level . '</td>
          </tr>';
avatar yuxxeun
@yuxxeun

92 Kontribusi 48 Poin

Diperbarui 8 bulan yang lalu

1 Jawaban:

Masalah yang Anda alami dengan garis tabel yang tidak sesuai di sekitar setting level dan bagian kanan mungkin terjadi karena beberapa alasan. Di antaranya adalah penggunaan atribut rowspan yang menggabungkan sel-sel dan memengaruhi tinggi baris secara dinamis. Untuk memperbaiki ini, pertimbangkan langkah-langkah berikut:

  1. Pastikan Lebar Kolom Tetap Konsisten: Pastikan lebar kolom pada tabel Anda tetap konsisten untuk setiap baris. Dalam kode yang Anda berikan, Anda telah menentukan lebar kolom dengan atribut width. Pastikan lebar ini tetap sama untuk setiap kolom dalam setiap baris.

  2. Cek Penggunaan rowspan: Penggunaan atribut rowspan dapat menggabungkan sel-sel dan memengaruhi tinggi baris secara dinamis. Pastikan penggunaan rowspan telah diterapkan dengan benar dan setiap baris memiliki atribut rowspan yang sesuai.

  3. Periksa CSS Tambahan: Selain kode HTML yang Anda berikan, periksa juga CSS yang digunakan untuk mengatur tabel. Beberapa properti CSS seperti border-collapse dan border-spacing dapat memengaruhi tampilan garis tabel.

  4. Gunakan CSS untuk Mengatur Tampilan Tabel: Sebaiknya gunakan CSS untuk mengatur tampilan tabel Anda. Anda dapat menggunakan properti border untuk mengontrol garis tepi sel dan baris tabel. Misalnya, Anda dapat mengatur border-collapse: collapse; untuk menggabungkan garis sel.

    Contoh CSS untuk mengatur garis tabel:

    table {
        border-collapse: collapse;
    }
    
    table, th, td {
        border: 1px solid black;
    }
    

    Anda dapat menyesuaikan ketebalan garis dan warnanya sesuai dengan preferensi Anda.

  5. Uji di Berbagai Browser: Terkadang, tampilan tabel dapat bervariasi di berbagai browser. Pastikan untuk menguji tampilan tabel Anda di beberapa browser untuk memastikan konsistensi.

Dengan mengikuti langkah-langkah di atas dan memeriksa kode CSS Anda, Anda dapat memperbaiki masalah dengan garis tabel yang tidak sesuai. Jika masih ada masalah, pastikan juga bahwa data yang dihasilkan dari basis data tidak memiliki karakteristik yang tidak diinginkan yang dapat memengaruhi tampilan tabel.

avatar adamajalah27
@adamajalah27

119 Kontribusi 40 Poin

Dipost 8 bulan yang lalu

Login untuk ikut Jawaban