Wie kann man eine feste Breite für <td> einrichten?

Question

Einfaches Schema:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

Ich muss eine feste Breite einrichten für <td> . Ich habe es versucht:

tr.something {
  td {
    width: 90px;
  }
}

Auch

td.something {
  width: 90px;
}

für

<td class="something">B</td>

Und selbst

<td style="width: 90px;">B</td>

Aber die Breite der <td> ist immer noch derselbe.

Answer 1

In meinem Fall konnte ich das Problem mit der folgenden Methode beheben min-width: 100px anstelle von width: 100px für die Zellen th ou td .

.table td, .table th {
    min-width: 100px;
}

Answer 2

Für Bootstrap 4 können Sie einfach die Klassenhilfe verwenden:

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...

Answer 3

Bootstrap 4.0

Bei Bootstrap 4.0 müssen wir die Tabellenzeilen als Flex-Boxen deklarieren, indem wir die Klasse d-flex hinzufügen, und auch die Suffixe xs, md, weglassen, damit Bootstrap sie automatisch aus dem Viewport ableiten kann.

Es wird also folgendermaßen aussehen:

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
    </tbody>
</table>

Ich hoffe, dass dies jemandem da draußen hilft!

Zum Wohl!

Answer 4

Bootstrap 4 und 5 haben eine Breite Dienstprogramm für die Größenänderung html-Element Breite Beispiel:

<tr class="w-50">
    <td class="w-25">A</td>
    ...
</tr>

Answer 5

Versuchen Sie das -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>