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

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

Po znaczniku table użyj elementu col. nie potrzebujesz metki zamykającej.

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>

Po prostu dodaj <div> tag wewnątrz <td> lub <th> zdefiniuj szerokość wewnątrz <div>. To ci pomoże. Nic więcej nie działa.

Np.

<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ć zarówno min-width, jak i max-width na tę samą wartość.

Musisz to napisać wewnątrz odpowiedniego 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 ponownie szerokość jako max i min za pomocą CSS:

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

.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*/   
}

Wtedy:

<td class="td_size">

Umieść atrybut class na dowolnym <td>.

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

CSS:

.special_column { width: 120px; }

HTML:

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

Użyłem tego

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

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

Spraw, aby zaakceptowana odpowiedź odpowiadał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/

Pomaga również, aby umieścić w ostatniej "filler cell", z width: auto . To zajmie pozostałą przestrzeń i pozostawi wszystkie inne wymiary zgodnie z podanymi.

Ustawienie tego:

style="min-width:100px;" 

KAsun ma dobry pomysł. Oto prawidłowy 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żliwe jest również użycie głowicy tabeli (która może być pusta) i zastosowanie względnych szerokości dla każdej komórki głowicy tabeli. Szerokość wszystkich komórek w korpusie tabeli będzie zgodna z szerokością ich głowicy 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;
}

Wyświetl Wynik

Alternatywnie, użyj colgroup, jak sugerowano w odpowiedzi Hyathina.

Używam elementu:: after w komórce, gdzie chcę ustawić minimalną szerokość niezależnie od obecnego tekstu, tak:

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

Nie muszę ustawiać szerokości na rodzicu tabeli ani używać table-layout.

Znalazłem odpowiedź Kasuna działa lepiej używając vwzamiast px Jak tak:

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

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

Nie musisz ustawiać "fixed" - wystarczy ustawić overflow:hidden, ponieważ szerokość kolumny jest ustawiona.