Używając CSS td szerokość bezwzględna, pozycja

Zobacz ten JSFIDDLE

td.rhead { width: 300px; }

Dlaczego szerokość CSS nie działa?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

Jakie są również skutki położenia: ustalone, bezwzględne itp. Na szerokości td, jeśli takie istnieją? Szukam powodu bardziej niż poprawki. Mam nadzieję, że zrozumiem, jak to działa.

To może nie być to, co chcesz usłyszeć, ale display: table-cellnie uwzględnia szerokości i zostanie zwinięte na podstawie szerokości całego stołu. Możesz to łatwo obejść, umieszczając display: blockelement wewnątrz samej komórki tabeli, której szerokość określasz, np

<td><div style="width: 300px;">wide</div></td>

Nie powinno to mieć większego znaczenia, czy <table>samo jest position: fixedbezwzględne, czy też bezwzględne, ponieważ wszystkie pozycje komórek są statyczne względem tabeli.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

EDYCJA: Nie mogę wziąć kredytu, ale jak mówią komentarze, możesz min-widthzamiast tego użyć zamiast widthkomórki tabeli.

Lepiej jest używać table-layout: fixed

Wartością domyślną jest Auto, a przy dużych tabelach może powodować pewne opóźnienie po stronie klienta, gdy przeglądarka iteruje ją, aby sprawdzić, czy wszystkie rozmiary pasują.

Naprawiono jest znacznie lepsze i szybciej wyświetla się na stronie. Struktura tabeli jest zależna od całkowitej szerokości tabel i szerokości każdej z kolumn.

Tutaj jest to zastosowane do oryginalnego przykładu: JSFIDDLE , Zauważysz , że pozostałe kolumny są zgniecione i zachodzą na swoją zawartość. Możemy to naprawić, używając więcej CSS (wszystko, co musiałem zrobić, to dodać klasę do pierwszego TR):

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

Widziany w akcji tutaj: JSFIDDLE

Powodem, dla którego nie działa w podanym łączu, jest to, że próbujesz wyświetlić kolumnę 300px PLUS 52 kolumny, każda z 7 kolumn. Zmniejsz liczbę kolumn i działa. Nie możesz zmieścić tylu na ekranie.

Jeśli chcesz wymusić dopasowanie kolumn, spróbuj ustawić:

body {min-width:4150px;}

zobacz mój jsfiddle: http://jsfiddle.net/Mkq8L/6/ @mike Nie mogę jeszcze komentować.

Powodem jest to, że nie określiłeś szerokości tabeli, a cała masa td jest przepełniona.

Na przykład dałem tabeli szerokość 5000 pikseli, co moim zdaniem będzie pasować do twoich wymagań.

table{
    width:5000px;
}

Jest to dokładnie ten sam kod, który podałeś, a ja po prostu dodałem do szerokości tabeli.

Wierzę, że to, co się dzieje, jest spowodowane tym, że twoje TD są daleko poza domyślną szerokością tabeli. Co możesz zobaczyć, jeśli wyciągniesz około 45 swoich td w każdym tr, (tj. Kod, który podałeś w swoim pytaniu, a nie jsfiddle), działa dokładnie dobrze

Spróbuj to działa.

<table>
<thead>
<tr>
<td width="300">need 300px</td>

Spróbuj użyć

table {
  table-layout: auto;
}

Jeśli używasz Bootstrap, klasa tablema table-layout: fixed;domyślnie.

Użyj właściwości układu tabeli i „stałej” wartości w tabeli.

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

Po ustawieniu całej szerokości stołu, możesz teraz ustawić szerokość w% td.

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

Możesz dowiedzieć się więcej na ten temat pod tym linkiem: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Moje szalone rozwiązanie.)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

Jeśli szerokość tabeli wynosi na przykład 100%, spróbuj użyć procentowej szerokości td, takiej jak 20%.

Zawijaj zawartość z pierwszej komórki w div, np. W ten sposób:

HTML:

<td><div class="rhead">a little space</div></td>

CSS:

.rhead {
  width: 300px;
}

Oto plik jsfiddle .

Możesz także użyć:

.rhead {
    width:300px;
}

ale będzie to tylko z niektórymi przeglądarkami, jeśli dobrze pamiętam, IE8 na to nie pozwala. Ogólnie rzecz biorąc, bezpieczniej jest po prostu umieścić width=""atrybut w <td>sobie.