td breedtes, werkt niet?

Dus ik heb deze code hier:

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

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

Het werkt prima in mijn browser en ik heb het in elke browser getest, zowel mac als pc, maar iemand klaagt dat de tdmet de widthvan 200 steeds verandert breedte. Ik heb geen idee waar hij het over heeft. Weet iemand waarom hij of zij de breedteverandering op de tdziet?

Antwoord 1, autoriteit 100%

Het zou moeten zijn:

<td width="200">

of

<td style="width: 200px">

Houd er rekening mee dat als uw cel inhoud bevat die niet in de 200px past (zoals somelongwordwithoutanyspaces), de cel toch zal uitrekken, tenzij uw CSS table-layout: fixedvoor de tabel.

BEWERKEN

Zoals Kristina Childs opmerkte in haar antwoord, moet je zowel het widthattribuut als het gebruik van inline CSS (met het styleattribuut) vermijden. Het is een goede gewoonte om stijl en structuur zoveel mogelijk te scheiden.

Antwoord 2, autoriteit 24%

Breedte en/of hoogte in tabellen zijn niet meer standaard; zoals Ianzz zegt, ze zijn verouderd. In plaats daarvan kunt u dit het beste doen door een blokelement in uw tabelcel te hebben dat de cel tot de gewenste grootte openhoudt:

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

Antwoord 3, autoriteit 20%

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

Hierdoor wordt de gestileerde breedte <td>geforceerd. Als de tekst deze overvult, overlapt deze de andere <td>tekst. Dus probeer mediaquery’s te gebruiken.

Antwoord 4, autoriteit 5%

Je kunt geen eenheden specificeren in width/heightattributen van een tabel; deze zijn altijd in pixels, maar je moet ze helemaal niet gebruiken omdat ze verouderd zijn.

Antwoord 5, autoriteit 5%

Je kunt de “table-layout: fixed;” proberen aan je tafel

table-layout: fixed;
width: 150px;

150px of de gewenste breedte.

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

Antwoord 6, autoriteit 4%

U kunt binnen <td>tag css gebruiken: display:inline-block

Vind ik leuk: <td style="display:inline-block">

Antwoord 7, autoriteit 2%

Dit probleem is vrij eenvoudig op te lossen met behulp van min-widthen max-widthbinnen een css-regel.

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

Hierdoor wordt de eerste kolom 80px breed. Meestal gebruik ik alleen max-width zonder min-width om te regeren in tekst die heel af en toe te lang is om een tabel te maken met een superbrede kolom die meestal leeg is. De vraag van de OP ging echter over het instellen op een vaste breedte, vandaar beide regels samen. In veel browsers wordt width:80px;in CSS genegeerd voor tabelkolommen. Het instellen van de breedte binnen de HTML werkt wel, maar is niet de manier waarop u dingen zou moeten doen.

Ik zou aanraden om regels voor minimale en maximale breedte te gebruiken en ze niet hetzelfde in te stellen, maar eerder een bereik in te stellen. Op deze manier kan de tabel zijn werk doen, maar je kunt hem wel wat hints geven over wat te doen met te lange inhoud.

Als ik wil voorkomen dat de tekst terugloopt en de hoogte van een rij vergroot – maar het toch mogelijk wil maken voor een gebruiker om de volledige tekst te zien, gebruik ik white-space: nowrap;on de hoofdregel en pas vervolgens een zweefregel toe die de regels voor width en nowrap verwijdert, zodat de gebruiker de volledige inhoud kan zien wanneer hij er met zijn muis overheen gaat.
Zoiets als dit:

CSS

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

Het hangt er gewoon van af wat je precies probeert te bereiken. Ik hoop dat dit iemand helpt.
PS Even terzijde, voor iOS is er een oplossing voor hover werkt niet – zie CSS Hover werkt niet op iOS Safari en Chrome

Antwoord 8

probeer te gebruiken

word-wrap: break-word;

hoop dat dit helpt

Antwoord 9

probeer dit:

word-break: break-all;

Antwoord 10

Ik gebruik

<td nowrap="nowrap">

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

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

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

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

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