When I add display: table
in the .data-container
class in order to make the width of the table fully fit the container, the table header disappears. I want the header to show, as well as the width for the header and the table to be 100%. I'm not sure how to fix this issue. I've tried a couple things but only one or the other works.
I have the following table:
<table class="table-container data-container">
<thead class="header-container">
<tr class="inner-headers">
<th class="header-content">Question</th>
<th class="header-content">Criteria</th>
<th class="header-content">Edit</th>
<th class="header-content">Delete</th>
</tr>
</thead>
</table>
This is my css:
.table-container {
flex: 1;
box-sizing: border-box;
border-radius: 4px;
color: rgba(0, 0, 0, 0.87);
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
letter-spacing: 0.01071em;
outline: none;
display: flex;
flex-direction: column;
border-spacing: 0;
border-collapse: collapse;
text-align: left;
}
.data-container {
position: relative;
-webkit-box-flex: 1;
flex-grow: 1;
flex-direction: column;
overflow: hidden;
width: 100%;
display: table;
}
.header-container {
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
display: flex;
-webkit-box-align: center;
align-items: center;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.inner-headers {
transform: translate3d(0px, 0px, 0px);
display: flex;
-webkit-box-align: center;
align-items: center;
}
.header-content {
position: relative;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-tap-highlight-color: transparent;
padding: 0 10px;
box-sizing: border-box;
flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
It is difficult to know what you want to achieve from looking at the CSS code. Most of that CSS is not necessary. However, the HTML code makes it clearer.
Set table-layout: fixed;
for equal width columns and width: 100%;
on the table-container
class and the rest of the CSS is not necessary.
The data-container
class is not necessary.
.table-container { border: solid 2px green; border-radius: 4px; width: 100%; table-layout: fixed; }.header-container { border: solid 2px orange; }.inner-headers { border: solid 2px blue; }.header-content { border: solid 2px red; border-radius: 4px; }
<table class="table-container"> <thead class="header-container"> <tr class="inner-headers"> <th class="header-content">Question</th> <th class="header-content">Criteria</th> <th class="header-content">Edit</th> <th class="header-content">Delete</th> </tr> </thead> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.