szerokości 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 w mojej przeglądarce i przetestowałem to w każdej przeglądarce, zarówno na Macu, jak i na PC, ale ktoś narzeka, że tdprzy width200 ciągle zmienia szerokość. Nie mam pojęcia, o czym on mówi. Czy ktoś wie, dlaczego widzi zmianę szerokości na td?

Powinno być:

<td width="200">

lub

<td style="width: 200px">

Zauważ, że jeśli twoja komórka zawiera jakąś treść, która nie mieści się w 200px (jak somelongwordwithoutanyspaces), komórka mimo to zostanie rozciągnięta, chyba że CSS zawiera table-layout: fixedtabelę.

EDYTOWAĆ

Jak zauważyła Kristina childs w swojej odpowiedzi, należy unikać zarówno widthatrybutu, jak i używania wbudowanego CSS (z styleatrybutem). Dobrą praktyką jest jak największe oddzielenie stylu i struktury.

Szerokość i / lub wysokość w tabelach nie są już standardowe; jak mówi Ianzz, są przestarzałe. Zamiast tego najlepszym sposobem na to jest umieszczenie 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;
}

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

To wymusi stylizowaną szerokość <td>. Jeśli tekst go przepełni, nałoży się na inny <td>tekst. Spróbuj więc użyć zapytań o media.

Nie możesz określić jednostek w width/ heightatrybuty tabeli; są one zawsze w pikselach, ale nie należy ich w ogóle używać, ponieważ są przestarzałe.

Możesz wypróbować metodę „table-layout: fixed;” do twojego stołu

table-layout: fixed;
width: 150px;

150px lub żądaną szerokość.

Źródła: https://css-tricks.com/fixing-tables-long-strings/

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

Lubić: <td style="display:inline-block">

Spróbuj użyć

word-wrap: break-word;

Mam nadzieję, że to pomoże

Spróbuj tego:

word-break: break-all;

używam

<td nowrap="nowrap">

aby zapobiec zawijaniu Odniesienie: https://www.w3schools.com/tags/att_td_nowrap.asp

Zauważ, ż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 zastępowała szerokość bezpośrednio w tabeli> tr> td.

Posługiwać się

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

Wymusi ustawienie tabeli na 100% szerokości. Następnie użyj tego kodu

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

(identyfikator tabeli to dataTable i ma 3 kolumny), aby określić długość każdej komórki

Próbowałem z wieloma rozwiązaniami, ale nie zadziałało, więc spróbowałem flex ze stołem i działało dobrze dla mnie ze wszystkimi funkcjami tabeli, takimi jak border-collapse i tak dalej, tylko zmiana to właściwość wyświetlania

To był mój wymóg HTML

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

Mój CSS

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

Problem ten jest dość łatwo rozwiązać za pomocą min-widthi max-widthwewnątrz reguły 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;
}

Spowoduje to wymuszenie szerokości pierwszej kolumny 80 pikseli. Zwykle używam tylko max-width bez min-width, aby królować w tekście, który jest bardzo czasami zbyt długi od utworzenia tabeli, która ma bardzo szeroką kolumnę, która jest w większości pusta. Pytanie OP dotyczyło jednak ustawienia stałej szerokości, stąd obie zasady razem. W wielu przeglądarkachwidth:80px; CSS jest ignorowany dla kolumn tabeli. Ustawienie szerokości w kodzie HTML działa, ale nie jest sposobem, w jaki powinieneś robić rzeczy.

Zalecałbym używanie reguł minimalnej i maksymalnej szerokości i nie ustawianie ich tak samo, ale raczej ustawienie zakresu. W ten sposób tabela może to zrobić, ale możesz dać jej kilka wskazówek, co zrobić z nadmiernie długą zawartością.

Jeśli chcę, aby tekst nie zawijał się i nie zwiększał wysokości wiersza - ale nadal umożliwiam użytkownikowi wyświetlenie pełnego tekstu, używam white-space: nowrap;na głównej regule, a następnie stosuję regułę najechania, która usuwa szerokość i nowe reguły tak, aby użytkownik mógł zobaczyć pełną treść, gdy najedzie na nią kursorem myszy. Coś takiego:

CSS

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

Zależy to tylko od tego, co dokładnie próbujesz osiągnąć. Mam nadzieję, że to komuś pomoże. PS Na marginesie, dla iOS jest poprawka powodująca, że ​​wskaźnik nie działa - zobacz CSS Hover nie działa w iOS Safari i Chrome