Styling HTML-Tabelle zu reagieren und vertikale Scrollen

-2

Grundsätzlich ist hier eine Tabelle. Ich möchte es reagieren (nicht auf Ansichtsfenster, nur auf Browser-Breite. Ich möchte keine feste Breite px), und ich möchte es scrollen.Styling HTML-Tabelle zu reagieren und vertikale Scrollen

Aber wie Sie sehen können, macht es merkwürdige Sachen im tbody Teil. Ich weiß nicht, warum es nicht die volle Breite nimmt ...

Wie repariere ich das?

Btw, die erste Spalte (Farbe) hat colspan = "2" Attribut, nur damit Sie wissen.

Ich fand einen Weg, um es zu beheben dank der css calc() -Funktion und einige grundlegende Mathematik.

table { 
 
    margin: 0% 5%; 
 
    width: 90%; 
 
    color: black; 
 
    font-family: Consolas; 
 
    border-spacing: 0; 
 
} 
 
table, td, th { 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 
tbody { 
 
    width: 100%; 
 
    height: 80px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 
td, th { 
 
    padding: 4px 0px; 
 
    display: inline-block; 
 
} 
 

 
tbody, thead, tr { 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 
th.special { 
 
    width: calc(29% - 0.29*17px + 17px); 
 
} 
 
td.A {width: 14%;} 
 
td.B {width: 29%;} 
 
td.C {width: 43%;} 
 
th.A {width: calc(14% - 0.14*17px); } 
 
th.B {width: calc(29% - 0.29*17px); } 
 
th.C {width: calc(43% - 0.43*17px);} 
 
td.color { background-color: #FE33E9; }

<table> 
 
<thead> 
 
    <tr><th class="C" colspan="2">Color</th><th class="A">X</th><th class="A">Y</th><th class="special">Caption</th></tr> 
 
</thead> 
 
<tbody> 
 
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr> 
 
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr> 
 
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr> 
 
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr> 
 
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr> 
 
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr> 
 
</tbody> 
 
</table>

Quelle

2017-06-23 Philippe

[Tabellen reagieren] (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_table_responsive) –

Ich möchte nicht horizontal scrollen. Ich fand das hässlich. Ich hätte lieber automatische Anpassung der Spaltenbreite – Philippe

Posted aktualisiert Antwort kann es für Sie arbeiten. – LKG

Sie haben calc Breite zu verwenden, um es zu bekommen, noch haben Sie bekommen richtige ansprechende Tabelle einige media query zu schreiben.

aktualisieren css Teil

td { 
    width: calc(100%/5 - 8px); 
} 

th { 
    width: calc(100%/4); 
}

table { 
 
    margin: 0% 5%; 
 
    width: 90%; 
 
    color: black; 
 
    font-family: Consolas; 
 
    border-spacing: 0; 
 
} 
 

 
table tbody tr { 
 
    display: block; 
 
    white-space: nowrap; 
 
} 
 

 
table, 
 
td, 
 
th { 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
td, 
 
th { 
 
    padding: 4px 0px; 
 
    display: inline-block; 
 
} 
 

 
td { 
 
    width: calc(100%/5 - 8px); 
 
} 
 

 
th { 
 
    width: calc(100%/4); 
 
} 
 

 

 
/* th.A, td.A {width: 14%;} 
 
th.B, td.B {width: 29%;} 
 
th.C, td.C {width: 43%;} */ 
 

 
td.color { 
 
    background-color: #FE33E9; 
 
} 
 

 
table tbody { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 80px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th class="C" colspan="2">Color</th> 
 
     <th class="A">X</th> 
 
     <th class="A">Y</th> 
 
     <th class="B">Caption</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="A color">.</td> 
 
     <td class="B">FE33E9</td> 
 
     <td class="A">121</td> 
 
     <td class="A">433</td> 
 
     <td class="B">bottom</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="A color">.</td> 
 
     <td class="B">FE33E9</td> 
 
     <td class="A">121</td> 
 
     <td class="A">433</td> 
 
     <td class="B">bottom</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="A color">.</td> 
 
     <td class="B">FE33E9</td> 
 
     <td class="A">121</td> 
 
     <td class="A">433</td> 
 
     <td class="B">bottom</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="A color">.</td> 
 
     <td class="B">FE33E9</td> 
 
     <td class="A">121</td> 
 
     <td class="A">433</td> 
 
     <td class="B">bottom</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="A color">.</td> 
 
     <td class="B">FE33E9</td> 
 
     <td class="A">121</td> 
 
     <td class="A">433</td> 
 
     <td class="B">bottom</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="A color">.</td> 
 
     <td class="B">FE33E9</td> 
 
     <td class="A">121</td> 
 
     <td class="A">433</td> 
 
     <td class="B">bottom</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Quelle

2017-06-23 08:47:38 LKG

Ich wusste nicht über calc, ist es eine empfohlene Verwendung? Oder sollte es vermieden werden? – Philippe

Ja, es ist css3 Eigentum und Sie können es hier lesen https://www.w3schools.com/cssref/func_calc.asp https: //developer.mozilla.org/de/docs/Web/CSS/calc – LKG

Ok, du hast mich dank calc rausgeholt. Ich habe es gerade so gemacht, dass das thead wenn 100% - die scrollbar width (17px scheinbar). Es passt sich perfekt an, ich muss nur die Grenze fixieren, aber es ist perfekt. Vielen Dank! – Philippe

Sie haben zu geben tr auch eine width: 100%.

sollte diese Arbeit:

table tbody tr { 
    display: inline-block; 
    width: 100%; 
}

Quelle

2017-06-23 09:07:47 TripleDeal

Das Snippet wurde bearbeitet. Das hat ein Problem behoben, aber jetzt verhindert die Bildlaufleiste das Ausrichten der Spalten ... – Philippe

Sie das Display als Inline-Block gegeben sind, es bedeutet, dass es nur den Inhalt Raum nehmen, so das Anzeigeformat als Block gibt, wird die Breite voll nehmen.

//Here is the Updated CSS 

table { 
    margin: 0% 5%; 
    width: 90%; 
    color: black; 
    font-family: Consolas; 
    border-spacing: 0; 
} 
table, td, th { 
    border: 1px solid black; 
    box-sizing: border-box; 
} 
td, th { 
    padding: 4px 0px; 
    display:inline-block; 
} 


th.A, td.A {width: 14%;} 
th.B, td.B {width: 29%;} 
th.C, td.C {width: 43%;} 
td.color { 
    background-color: #FE33E9; 
} 

table tbody { 
    display: inline-block; 
    width: 100%; 
    height: 80px; 
    /*Updated*/ 
    //overflow-y: auto; 
    //overflow-x: hidden; //these No Need just give overflow as auto; 
    overflow : auto; 
} 

//Newly Added 

tr { 
    display: inline; 
}

Quelle

2017-06-23 09:17:24

versuchen Sie dieses

#container { 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
table { 
 
    width: 100%; 
 
    color: black; 
 
    font-family: Consolas; 
 
    border-spacing: 0; 
 
    display: block; 
 
} 
 

 
table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
td { 
 
    width: 5%; 
 
} 
 

 
.fth { 
 
    width: 6.4%; 
 
} 
 

 
.sth { 
 
    width: 3.1%; 
 
} 
 

 
.tth { 
 
    width: 3.1%; 
 
} 
 

 
.foth { 
 
    width: 3%; 
 
} 
 

 
td.color { 
 
    background-color: #FE33E9; 
 
} 
 

 
table thead { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
table tbody { 
 
    display: inline-block; 
 
    width: 100%; 
 
    overflow-y: auto; 
 
    text-align: center; 
 
    height: 100px; 
 
}

<div id="container"> 
 
\t \t <table id="table-1"> 
 
\t \t \t <thead id="header-fixed"> 
 
\t \t \t  <tr style=""><th colspan="2" class="fth">Color</th><th class="sth">X</th><th class="tth">Y</th><th class="foth">Caption</th></tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
\t \t \t \t <tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr> 
 
    \t \t </tbody> 
 
\t \t </table> 
 
\t </div>

i bearbeiten Code für siehe thead wenn tbody scroll

es jetzt richtig arbeiten mit css

Quelle

2017-06-23 09:25:04 Bhargav

Das ist ein wirklich schönes, obwohl ich die Überschriften beim Scrollen behalten möchte. Deshalb war die Bildlaufleiste nur auf dem tbody – Philippe

Ich habe meinen Code jetzt bearbeiten sehen Sie es – Bhargav

Es ist eine wirklich nette Lösung, ich mag es ziemlich, aber ich fand einen anderen Weg, es mit css Calc-Funktion zu tun. Ich werde das beiseite, aber danke, – Philippe

Styling HTML-Tabelle zu reagieren und vertikale Scrollen

Antwort

Verwandte Themen