lebar td, tidak berfungsi?

Jadi saya punya kode ini di sini:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

dengan CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

Ini berfungsi dengan baik di browser saya dan saya telah mengujinya di setiap browser baik mac dan PC, tetapi seseorang mengeluh bahwa tddengan width200 terus berubah lebar. Saya tidak tahu apa yang dia bicarakan. Adakah yang tahu mengapa dia melihat perubahan lebar di td?

Harus:

<td width="200">

atau

<td style="width: 200px">

Perhatikan bahwa jika sel Anda berisi beberapa konten yang tidak sesuai dengan 200px (seperti somelongwordwithoutanyspaces), sel akan meregang, kecuali jika CSS Anda berisi table-layout: fixeduntuk tabel.

EDIT

Seperti yang dicatat oleh anak kristina pada jawabannya, Anda harus menghindari widthatribut dan menggunakan CSS sebaris (dengan styleatribut). Merupakan praktik yang baik untuk memisahkan gaya dan struktur sebanyak mungkin.

Lebar dan / atau tinggi tabel sudah tidak standar lagi; seperti yang dikatakan Ianzz, mereka tidak digunakan lagi. Alih-alih, cara terbaik untuk melakukannya adalah dengan memiliki elemen blok di dalam sel tabel Anda yang akan menahan sel terbuka ke ukuran yang Anda inginkan:

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

 <table style="table-layout:fixed;">

Ini akan memaksa lebar gaya <td>. Jika teks terlalu mengisinya, teks itu akan tumpang tindih dengan <td>teks lainnya . Jadi coba gunakan kueri media.

Anda tidak dapat menentukan unit di width/ heightatribut tabel; ini selalu dalam piksel, tetapi Anda tidak boleh menggunakannya sama sekali karena sudah usang.

Anda dapat mencoba "table-layout: fixed;" ke meja Anda

table-layout: fixed;
width: 150px;

150px atau lebar yang Anda inginkan.

Referensi: https://css-tricks.com/fixing-tables-long-strings/

Anda dapat menggunakan dalam <td>tag css:display:inline-block

Suka: <td style="display:inline-block">

coba gunakan

word-wrap: break-word;

berharap bantuan ini

coba ini:

word-break: break-all;

saya menggunakan

<td nowrap="nowrap">

untuk mencegah pembungkus Referensi: https://www.w3schools.com/tags/att_td_nowrap.asp

Perhatikan bahwa menyesuaikan lebar kolom di thead akan mempengaruhi seluruh tabel

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>[email protected]</td>
    </tr>
</table>

Dalam kasus saya, lebar pada thead> tr menimpa lebar pada tabel> tr> td secara langsung.

Menggunakan

<table style="table-layout:fixed;">

Ini akan memaksa tabel untuk mengatur lebar 100%. Kemudian gunakan kode ini

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(ID tabel adalah dataTable dan memiliki 3 kolom) untuk menentukan panjang setiap sel

Saya mencoba dengan banyak solusi tetapi tidak berhasil untuk saya, jadi saya mencoba fleksibel dengan tabel dan berfungsi dengan baik untuk saya dengan semua fungsi tabel seperti border-collapse dan seterusnya hanya perubahan adalah properti tampilan

Ini adalah persyaratan HTML saya

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

CSS saya

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

Masalah ini cukup mudah diselesaikan dengan menggunakan min-widthdan max-widthdalam aturan css.

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

Ini akan memaksa kolom pertama menjadi lebar 80px. Biasanya saya hanya menggunakan max-width tanpa min-width untuk mengatur teks yang terkadang terlalu panjang dari pembuatan tabel yang memiliki kolom super lebar yang sebagian besar kosong. Pertanyaan OP adalah tentang mengatur ke lebar tetap, karenanya kedua aturan itu bersama-sama. Di banyak browserwidth:80px; di CSS diabaikan untuk kolom tabel. Menyetel lebar di dalam HTML memang berhasil, tetapi bukan cara yang harus Anda lakukan.

Saya akan merekomendasikan menggunakan aturan lebar min dan maks, dan tidak menyetelnya sama melainkan menetapkan rentang. Dengan cara ini tabel dapat melakukan tugasnya, tetapi Anda dapat memberikan beberapa petunjuk tentang apa yang harus dilakukan dengan konten yang terlalu panjang.

Jika saya ingin menjaga teks agar tidak membungkus dan meningkatkan tinggi baris - tetapi masih memungkinkan pengguna untuk melihat teks lengkap, saya gunakan white-space: nowrap;pada aturan utama, lalu terapkan aturan hover yang menghapus aturan lebar dan sekarang sehingga pengguna dapat melihat konten lengkap saat mereka mengarahkan mouse ke atasnya. Sesuatu seperti ini:

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

Itu hanya tergantung pada apa yang ingin Anda capai. Saya harap ini membantu seseorang. PS Sebagai tambahan, untuk iOS ada perbaikan untuk hover tidak berfungsi - lihat CSS Hover Tidak Berfungsi di iOS Safari dan Chrome