Wymuszenie, aby tabela i jej komórki miały szerokość poprawki - html, html5

Pracuję z szablonem sieciowym, który definiuje następujące elementy wewnątrz pliku CSS: -

div.dataTables_length select {
width: 50px;
}
.dataTables_filter input, .dataTables_length select {
display: inline-block;
margin-bottom: 0;
}

Tabela jest zdefiniowana następująco:

<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th></th> <th></th>
</tr></thead>
<tbody>
<tr>

BTU obecnie mam do czynienia z problemem jest to, żeszablon automatycznie skróci wartość i wyświetli tylko jej część. Na przykład, jeśli istnieje długa wartość opisu, komórka może wyświetlić jej część. Czy istnieje sposób, aby zmodyfikować tabelę tak, aby miała następujące elementy:

1. Komórka tabeli będzie zawsze mieć tę samą szerokość, ale dynamiczną wysokość.
2. Stół powinien zawsze mieć taką samą szerokość, aby nie zniknął z układu na wypadek, gdyby był długi tekst.
3. Aby wyświetlić pełny tekst każdego pola, a komórka powinna atomicznie przejść do nowej linii.

pozdrowienia

:::EDYTOWAĆ:::

W ten sposób tabela będzie wyświetlana, przy czym kolumny tabeli zawierają długi test: -

Odpowiedzi:

Kwestia skracania została już poruszona w komentarzach. Zaadresuję szerokość stołu.

Jeśli chcesz ustawić szerokość kolumny tabeli, musisz ustawić tę samą szerokość dla wszystkich kolumn lub podać określone szerokości dla określonych kolumn.

.table th, .table td { width: 50px; } /* sets the default value of all columns */
.table .name { width: 100px; word-wrap: break-word; } /* overrides the default with specific value for certain column*/

<table class="table">
<tr>
<td class="name">James T. Kirk</td>
<td class="name">Spock</td>
</tr>
</table>

Unikałbym stosowania procentu (%) w szerokości kolumn, zwłaszcza jeśli tekst będzie się zmieniać w długości.

EDYTOWAĆ - Rozumiem, co masz na myśli. Musisz wprowadzić styl css zawijania wyrazów: słowo-przerwania; Zaktualizowałem powyższy kod i utworzyłem jsfiddle próbny.