问题
I have an HTML <table> with many columns, so when my web page is displayed on a mobile browser, it's too small. So I'm creating a media query and I want to remove some columns (That are not important).
So how to remove an html column using only css ?
For example, how to remove the column "B" in the middle of the table on the next example :
table, th, td, tr{
border:1px solid black;
}
table{
width:100%;
}<table>
<th>A</th>
<th>B</th>
<th>C</th>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>回答1:
<style>
table, th, td, tr{
border:1px solid black;
}
table{
width:100%;
}
@media (max-width: 768px){
tr th:nth-child(2),tr td:nth-child(2){
display:none;
}
}
</style>
回答2:
Not what you asked for, but how about making the table horizontally scrollable?
The scrollbar will only appear when the window cannot fit the content if you use overflow-x: auto.
table,
th,
td,
tr {
border: 1px solid black;
}
table {
width: 100%;
}
.hscroll {
overflow-x: auto;
}
.example {
white-space: nowrap;
}<div class="hscroll">
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td class="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
<td>50</td>
</tr>
</tbody>
</table>
</div>回答3:
You can use n-th child to manage table columns.
th:nth-child(2) { display:none; }
回答4:
If you use nth-child, it will cause issues later when you add/remove more th/td's. Better use a class which you can reuse in your entire application.
<table>
<th>A</th>
<th class="hide-on-mobile">B</th>
<th>C</th>
<tr>
<td>Jill</td>
<td class="hide-on-mobile">Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td class="hide-on-mobile">Jackson</td>
<td>94</td>
</tr>
</table>
@media (max-width: 768px){
hide-on-mobile{
display:none;
}
}
回答5:
The proper way is using col elements with visibility: collapse.
<colgroup>
<col />
<col />
<col />
</colgroup>
col:nth-child(2) {
visibility: collapse;
}
table, th, td, tr {
border: 1px solid black;
}
table {
width: 100%;
}
col:nth-child(2) {
visibility: collapse;
}<table>
<colgroup>
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>This way will work properly even if you use colspan.
However, note the layout of the table will be calculated before hiding the columns. And at the end, the remaining columns won't grow to make the table respect width: 100%. As described in Dynamic effects, this avoids expensive re-layout operations. To compensate this, you can increase the width of the table beyond 100%.
div {
overflow: hidden;
margin: 20px 0;
}
table, th, td, tr {
border: 1px solid black;
}
table {
width: 100%;
table-layout: fixed;
}
table.grow {
width: 150%;
}
col.hidden {
visibility: collapse;
}<div>
Full table
<table>
<colgroup>
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th colspan="2">A B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td colspan="2">Eve Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
</div>
<div>
Hiding last column
<table>
<colgroup>
<col />
<col />
<col class="hidden" />
</colgroup>
<thead>
<tr>
<th colspan="2">A B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td colspan="2">Eve Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
</div>
<div>
Hiding last column and enlarging table
<table class="grow">
<colgroup>
<col />
<col />
<col class="hidden" />
</colgroup>
<thead>
<tr>
<th colspan="2">A B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td colspan="2">Eve Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
</div>回答6:
Use css :nth-child() and inside media query write styles for hiding columns:
table, th, td, tr{
border:1px solid black;
}
table {
width:100%;
}
@media all and (max-width: 768px){
table tr th:nth-child(2),
table tr td:nth-child(2) {
display: none;
}
}<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>回答7:
To remove the second column:
table tr>th:nth-of-type(2), table tr>td:nth-of-type(2){
display: none;
}
table,
th,
td,
tr {
border: 1px solid black;
}
table {
width: 100%;
}
@media (max-width: 900px){ /* use your media breakpoint */
table tr>th:nth-of-type(2), table tr>td:nth-of-type(2){
display: none;
}
}<table>
<tr>
<th>A</th>
<th id="foo">B</th>
<th>C</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>JSFiddle
Note: your HTML is not valid - th must also be inside the tr element.
回答8:
If you must use html tables I would recommend using stacktable.js. Otherwise use css display tables.
回答9:
Since everyone goes straight forward, I would like to recommend you bootstrap - this would help you in many situations when dealing with responsive design. After installing it, you will have to modify your code like this:
<table>
<tr>
<th>A</th>
<th class="hidden-xs">B</th>
<th>C</th>
</tr>
<tr>
<td>Jill</td>
<td class="hidden-xs">Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td class="hidden-xs">Jackson</td>
<td>94</td>
</tr>
</table>
You can read more about it at this question.
来源：https://stackoverflow.com/questions/37811034/how-to-remove-an-html-table-column-using-only-css