wake-up-neo.com

So passen Sie die Breite der Tabelle in Breite an

Zuerst versuchen Sie bitte, diese jsFiddle anzusehen. Wie Sie sehen, habe ich eine Tabelle mit vielen Spalten. Mein einziges Problem ist, wie ich all das td an seine Breite anpassen kann, je nachdem, wie lange der Text darin ist die Wörter einwickeln?

Hier ist mein HTML-Code:

<div class="content">
    <div class="content-header">

    </div>
    <div class="content-loader">
        <table>
            <tbody>
                <tr>
                    <td>First Name</td>
                    <td>Last Name</td>
                    <td>Gender</td>
                    <td>Birth Date</td>
                    <td>Address</td>
                    <td>Zip Code</td>
                    <td>Nationality</td>
                    <td>Contact Number</td>
                    <td>Email</td>
                    <td>Username</td>
                    <td>Course</td>
                    <td>Year</td>
                    <td>ID Number</td>
                    <td>Subjects</td>
                    <td>Other Fields</td>
                    <td>Other Fields</td>
                    <td>Other Fields</td>
                    <td>Other Fields</td>
                    <td>Other Fields</td>
                    <td>Other Fields</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Und hier ist mein CSS-Code: 

.content {
    width: 1100px;
    height: 200px;
    background: #fdfdfd;
    margin: 0px auto;
    position: relative;
    top: 40px;
    border: 1px solid #aaaaaa;
}

.content .content-header {
    width: 100%;
    height: 40px;
    background-color:#aaa;
    background-image:-moz-linear-gradient(top,#eeeeee,#cccccc);
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#cccccc));
    background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc);
    background-image:-o-linear-gradient(top,#eeeeee,#cccccc);
    background-image:linear-gradient(to bottom,#eeeeee,#cccccc);
    border-bottom: 1px solid #aaaaaa;
}

.content-loader {
    overflow: scroll;
}
.content-loader table {
    width: auto;
    background: #aaa;
}

.content-loader table tr {
    background: #eee;
}

.content-loader table tr td {

}

Kann mir bitte jemand dabei helfen? Oder wenn es hier schon gefragt wurde, zeigen Sie mir bitte den Link. 

16
Pengun

Entfernen Sie alle mit CSS festgelegten Breiten und stellen Sie den Leerraum so ein, dass er jetzt wie folgt abläuft:

.content-loader tr td {
    white-space: nowrap;
}

Ich würde auch die feste Breite aus dem Container entfernen (oder overflow-x: scroll zum Container hinzufügen), wenn die Felder in ihrer Gesamtheit angezeigt werden sollen, ohne dass es seltsam aussieht ...

Mehr dazu hier: http://www.w3schools.com/cssref/pr_text_white-space.asp

25
Joshua Smickus

Verwenden Sie dieses Stilattribut für kein Word-Wrapping:

white-space: nowrap;
8
NerdNeo

sie können auch display: table anstelle von Tabellen verwenden. Divs sind viel flexibler als Tabellen.

Beispiel:

.table {
   display: table;
   border-collapse: collapse;
}
 
.table .table-row {
   display: table-row;
}
 
.table .table-cell {
   display: table-cell;
   text-align: left;
   vertical-align: top;
   border: 1px solid black;
}
<div class="table">
	<div class="table-row">
		<div class="table-cell">test</div>
		<div class="table-cell">test1123</div>
	</div>
	<div class="table-row">
		<div class="table-cell">test</div>
		<div class="table-cell">test123</div>
	</div>
</div>

2
warch