html hücresindeki genişlik nasıl değiştirilir

Hücre boyutlarını manuel olarak kontrol etmek istediğim bir html tablosu var. Nasıl çalışması gerektiği konusunda kafam karıştı. Her şeyden önce, hücre boyutunun otomatik olarak sütundaki en büyük içeriğe veya sabit bir boyuta ayarlanıp ayarlanmadığını kontrol etmesi gereken "tablo düzeni" CSS niteliği vardır. Hem table-layout = auto hem de = fixed kullanarak td öğelerinin CSS genişliğini ayarlamaya çalıştım ve içeriğin orijinal boyutundan küçültüldüğü her iki seferde. Sorun, masa düzeni için her iki değeri de kullanmak istediğim boyutuna küçülmemesiydi. İşte benim CSS kodum:

table {table-layout:fixed;}
tr, td {border-style:solid;
  border-width:2px;}
.coursename{width:50px;}
.startdate {width:5px;} 
.isbn{width:10px;}
.author {width:20px;}
.booktitle{width:10px;}

İkincisi, otomatik bir masa düzeni için tam olarak kuralları nelerdir? Tüm tablo hücrelerinin içeriği birlikte sayfanın boyutundan geçiyorsa, önce küçülecek belirli sütunlar var mı? Hiç büzüşecekler mi?

1
Html örneğini içerik örneği ile gönderebilir misiniz? Çözümü yalnız CSS ile bulmak zor.
katma yazar Alexey Ivanov, kaynak

2 cevap

Yardımcı olabilecek bir fikir, örneğin her hücrede bir bağlantı varsa, bağlantıyı aşağıdaki gibi ayarlayın:

a { display: block; width: 30px; }

Bunu tablo satırındaki her hücre için yapın; sabit genişlikte tablo hücrelerine sahip olacaksınız. Tablonun genişliğini de düzeltmeniz şartıyla ... :)

1
katma

Sorununun ne olduğundan hala emin değilim ama deneyebilirsin     {Tablo düzeni: miras;} Bu, boyutu ana öğeden almalıdır. Ayrıca, CSS öğesini html'ye ekleyebilir ve a ile bir önceki öğeleri kontrol ederek diğer öğeleri geçersiz kılabilirsiniz.     {Sınıf = "! Genişliği: 300 piksel;"}

Bu yardımcı olur umarım.

0
katma