td genişlikleri, çalışmıyor mu?

Yani burada şu koda sahibim:

<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>

CSS ile

.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;
}

Tarayıcımda iyi çalışıyor ve hem Mac hem de PC'de her tarayıcıda test ettim, ancak biri 200 tdile widthgenişliği değişmeye devam ettiğinden şikayet ediyor. Neden bahsettiği hakkında hiçbir fikrim yok. Genişlik değişikliğini neden gördüğünü bilen var mı td?

Olmalı:

<td width="200">

veya

<td style="width: 200px">

Hücrenizin 200 piksele (gibi somelongwordwithoutanyspaces) sığmayan bazı içerikler içeriyorsa, CSS'niz table-layout: fixedtablo için içermediği sürece hücrenin yine de uzayacağını unutmayın .

DÜZENLE

Kristina Childs'ın cevabında belirttiği gibi, hem widthöznitelikten hem de satır içi CSS ( styleöznitelikle birlikte) kullanmaktan kaçınmalısınız . Stil ve yapıyı olabildiğince ayırmak iyi bir uygulamadır.

Tablolardaki genişlik ve / veya yükseklik artık standart değil; Ianzz'ın dediği gibi, kullanımdan kaldırıldılar. Bunun yerine, bunu yapmanın en iyi yolu, hücreyi istediğiniz boyutta açık tutacak tablo hücrenizin içinde bir blok öğeye sahip olmaktır:

<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;">

Bu, şekillendirilmiş genişliği zorlayacaktır <td>. Metin onu doldurursa, diğer <td>metinle örtüşecektir . Bu yüzden medya sorgularını kullanmayı deneyin.

Bir tablonun width/ heightözniteliklerinde birimleri belirtemezsiniz ; bunlar her zaman piksel cinsindendir, ancak kullanımdan kaldırıldıkları için bunları hiç kullanmamalısınız.

"Table-layout: fixed;" deneyebilirsiniz. masana

table-layout: fixed;
width: 150px;

150px veya istediğiniz genişlik.

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

<td>Css etiketi içinde kullanabilirsiniz :display:inline-block

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

kullanmaya çalışmak

word-wrap: break-word;

umarım bu yardım eder

bunu dene:

word-break: break-all;

kullanırım

<td nowrap="nowrap">

Kaydırmayı önlemek için: https://www.w3schools.com/tags/att_td_nowrap.asp

Thead'deki bir sütunun genişliğini ayarlamanın tüm tabloyu etkileyeceğini unutmayın.

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>joe@email.com</td>
    </tr>
</table>

Benim durumumda, thead> tr üzerindeki genişlik, table> tr> td üzerindeki genişliği doğrudan geçersiz kılıyordu.

Kullanım

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

Tabloyu% 100 genişliğe ayarlamaya zorlayacaktır. Sonra bu kodu kullanın

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

(tablo kimliği dataTable'dır ve 3 sütun içerir) her hücrenin uzunluğunu belirtmek için

Pek çok çözümü denedim ama benim için işe yaramadı, bu yüzden masayla esnek olmayı denedim ve border-collapse gibi tüm tablo işlevlerinde benim için iyi çalıştı ve bu yüzden sadece değişiklik display özelliği

Bu benim HTML gereksinimimdi

<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'm

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;
}

Bu sorun, min-widthve kullanılarak oldukça kolay çözülür.max-width bir css kuralı içinde .

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;
}

Bu, ilk sütunu 80 piksel genişliğinde olmaya zorlar. Genellikle, çoğunlukla boş olan süper geniş bir sütuna sahip bir tablo oluşturmaktan çok nadiren çok uzun olan metinde hüküm sürmek için yalnızca minimum genişlik olmadan maksimum genişliği kullanırım. OP'nin sorusu sabit bir genişliğe ayarlamakla ilgiliydi, dolayısıyla her iki kural da birlikte. Birçok tarayıcıdawidth:80px; tablo sütunları için göz ardı edilir. HTML içinde genişliği ayarlamak işe yarıyor, ancak işleri yapmanız gereken yol bu değil.

Minimum ve maksimum genişlik kurallarını kullanmanızı ve bunları aynı şekilde değil, bir aralık ayarlamanızı öneririm. Bu şekilde masa bir şeyi yapabilir, ancak aşırı uzun içerikle ne yapılacağı konusunda ona bazı ipuçları verebilirsiniz.

Metnin kaydırılmasını ve bir satırın yüksekliğini artırmasını engellemek, ancak yine de bir kullanıcının tam metni görmesini sağlamak istiyorsam, white-space: nowrap; kılıyorsam, ana kuralda kullanıyorum, ardından genişliği ve şimdi kaydırma kurallarını kaldıran bir fareyle üzerine gelme kuralı uyguluyorum böylece kullanıcı faresinin üzerine geldiğinde tüm içeriği görebilir. Bunun gibi bir şey:

CSS

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

Sadece tam olarak neyi başarmaya çalıştığınıza bağlı. Umarım bu birine yardımcı olur. Not Bir kenara, iOS için fareyle üzerine gelmenin çalışmaması için bir düzeltme var - bkz . İOS Safari ve Chrome'da CSS Hover Çalışmıyor