Ustaw stałą szerokość kolumny tabeli niezależnie od ilości tekstu w jej komórkach?

W mojej tabeli ustawiam szerokość pierwszej komórki w kolumnie 100px.
Jednak gdy tekst w jednej z komórek w tej kolumnie jest za długi, szerokość kolumny staje się większa niż 100px. Jak mogę wyłączyć to rozszerzenie?

Bawiłem się nim przez chwilę, ponieważ miałem problemy z rozgryzieniem.

Trzeba ustawić szerokość komórki (albo thczy tdpracował, ustawić oba) i ustawić table-layoutsię fixed. Z jakiegoś powodu szerokość komórki wydaje się pozostać stała tylko wtedy, gdy ustawiona jest również szerokość tabeli (myślę, że to głupie, ale whatev).

Przydatne jest również ustawienie tej overflowwłaściwości, hiddenaby zapobiec wyjściu dodatkowego tekstu z tabeli.

Powinieneś również zostawić całą granicę i rozmiar CSS.

Ok, oto co mam:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Tutaj jest w JSFiddle

Ten facet miał podobny problem: szerokości komórek tabeli - ustalanie szerokości, zawijanie / obcinanie długich słów

Zobacz: http://www.html5-tutorials.org/tables/changing-column-width/

Po znaczniku table użyj elementu col. nie potrzebujesz tagu zamykającego.

Na przykład, jeśli masz trzy kolumny:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Wystarczy dodać <div>znacznik do środka <td>lub <th>zdefiniować szerokość wewnątrz <div>. To ci pomoże. Nic innego nie działa.

na przykład.

<td><div style="width: 50px" >...............</div></td>

Jeśli potrzebujesz jednej lub więcej kolumn o stałej szerokości, podczas gdy inne kolumny powinny zmienić rozmiar, spróbuj ustawić obie min-widthi max-widthtę samą wartość.

Musisz to zapisać w odpowiednim CSS

table-layout:fixed;

To co robię to:

1. Ustaw szerokość td:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. Ustaw szerokość td za pomocą CSS:

   <td style="width:200px; height:50px;">

3. Ustaw szerokość ponownie jako maks. I min za pomocą CSS:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Brzmi trochę powtarzalnie, ale daje mi pożądany efekt. Aby to osiągnąć z łatwością, może być konieczne umieszczenie wartości CSS w klasie w arkuszu stylów:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

następnie:

<td class="td_size">

Umieść atrybut klasy w dowolnym miejscu <td>.

Użyłem tego

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Jeśli nie chcesz mieć stałego układu, określ klasę odpowiedniego rozmiaru kolumny.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

Pomaga także wstawić ostatnią „komórkę wypełniającą” o szerokości: auto . Spowoduje to zajęcie pozostałej przestrzeni i pozostawi wszystkie pozostałe wymiary, jak określono.

Spraw, aby zaakceptowana odpowiedź reagowała na małe ekrany, gdy są mniejsze niż stała szerokość.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Ustawienie to:

style="min-width:100px;" 

Pracował dla mnie.

KAsun ma właściwy pomysł. Oto poprawny kod ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Zgodnie z moją odpowiedzią tutaj można również użyć nagłówka tabeli (który może być pusty) i zastosować względne szerokości dla każdej komórki nagłówka tabeli. Szerokość wszystkich komórek w treści tabeli będzie zgodna z szerokością ich nagłówka kolumny. Przykład:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Zobaczyć wynik

Alternatywnie, użyj colgroupzgodnie z sugestią zawartą w odpowiedzi Hyathina.

W komórce używam elementu :: after, w którym chcę ustawić minimalną szerokość niezależnie od tekstu, tak jak poniżej:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Nie muszę ustawiać szerokości nadrzędnego tabeli ani używać układu tabeli.

Odkryłem, że odpowiedź KAsun działa lepiej przy użyciu vw zamiast px, tak:

<td><div style="width: 10vw" >...............</div></td>

To była jedyna stylizacja, której potrzebowałem, aby dostosować szerokość kolumny

Nie trzeba ustawiać "fixed"- wystarczy ustawić, overflow:hiddenponieważ szerokość kolumny jest ustawiona.