szerokość td, nie działa?

Więc mam ten kod tutaj: 

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

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

Działa dobrze na mojej przeglądarce i Przetestowałem go w każdej przeglądarce zarówno mac jak i PC, ale ktoś narzeka, że td z width z 200 ciągle zmienia szerokość. Nie mam pojęcia, o czym on mówi. Czy ktoś wie dlaczego widzi zmianę szerokości na td?

Author: Allan Pereira, 2012-06-19
Source

9 answers

Powinno być: 

<td width="200">

Lub 

<td style="width: 200px">

Zauważ, że jeśli Twoja komórka zawiera zawartość, która nie pasuje do 200px (jak somelongwordwithoutanyspaces), komórka będzie się rozciągać, chyba że Twój CSS zawiera table-layout: fixed dla tabeli.

EDIT

Jak zauważyła kristina childs w swojej odpowiedzi, powinieneś unikać zarówno atrybutu width, jak i używania inline CSS(z atrybutem style). To dobra praktyka, aby oddzielić styl i strukturę jak najwięcej.

 82
Author: bfavaretto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-18 20:54:14

Szerokość i / lub wysokość w tabelach nie są już standardem; jak mówi Ianzz, są przestarzałe. Zamiast tego najlepszym sposobem na to jest posiadanie elementu blokowego wewnątrz komórki tabeli, który utrzyma komórkę otwartą do żądanego rozmiaru: 

<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;
}
 20
Author: kristina childs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-28 17:32:19 
 <table style="table-layout:fixed;">

Wymusi to stylizowaną Szerokość <td>. Jeśli tekst zostanie wypełniony, naleje się na drugi <td> tekst. Spróbuj więc użyć zapytań o media.

 10
Author: mateostabio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-28 15:08:40

Nie można określić jednostek w width/height atrybuty tabeli są zawsze w pikselach, ale nie powinieneś ich używać, ponieważ są przestarzałe.

 5
Author: lanzz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-18 20:29:18

Spróbuj użyć 

word-wrap: break-word;

Hope this help

 3
Author: Med7at,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-30 17:39:27

Możesz spróbować "table-layout: fixed;" do swojej tabeli 

table-layout: fixed;
width: 150px;

150px lub żądanej szerokości.

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

 2
Author: Cyan Baltazar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-29 09:21:40

Możesz użyć w <td> tagu css: display:inline-block

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

 2
Author: Siddharth Shukla,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-21 09:54:23

Zwróć uwagę, że dostosowanie szerokości kolumny w thead wpłynie na całą tabelę 

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

W moim przypadku, szerokość na thead > tr była nadrzędna szerokość na table > tr > td bezpośrednio.

 0
Author: Nick Woodhams,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-28 05:44:10

Spróbuj tego: 

word-break: break-all;
 0
Author: Masoud HB,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-23 09:04:05