How to structure bootrap tables in this way? - css

I'm looking to structure the tables in this way:
I tried doing that but I don't know how to put two columns inside a row (inch, cm)
It's a clothing store of a friend so I'd appreciate any help in this.

Did you try to do like this?
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align:center;
}
.title{
background-color:red;
}
.sub-title{
background-color:lightgreen;
}
.footer{
background-color:lightcoral;
}
<table>
<thead>
<tr class="title">
<th colspan="7">Size Table</th>
</tr>
<tr class="sub-title">
<th rowspan="2"></th>
<th colspan="2">Bust</th>
<th colspan="2">Bust</th>
<th colspan="2">Bust</th>
</tr>
<tr class="sub-title">
<th>CH</th>
<th>CM</th>
<th>CH</th>
<th>CM</th>
<th>CH</th>
<th>CM</th>
</tr>
</thead>
<tbody>
<tr>
<td>S</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
<tr>
<td>M</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
<tr>
<td>L</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
</tbody>
<tfoot>
<tr class="footer">
<th colspan="7">description</th>
</tr>
</tfoot>
</table>

this code will help you. check the below jsfiddle link
https://jsfiddle.net/Gurmatpal/aq9Laaew/221894/

Check This Code. I think this will help you
table {
empty-cells: show;
border: 1px solid #000;
}
table td,
table th {
min-width: 2em;
min-height: 2em;
border: 1px solid #000;
}
<table>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="2"> </th>
<th colspan="2"> </th>
</tr>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>

Related

Unable to get table header to be in a fixed position(sticky)

So i have a html table and I'm trying to make the table header act as sticky when scrolling since there will be a lot of rows, but it not working. I'm unable to get the header to stick or stay in a fixed position. My table has a fixed layout with a width of 250%.I am not really sure on how to make the table header sticky without ruining the current CSS ,any guidance will be helpful thank you.
HTML
<section class="justify-content-center table-section">
<table class="table" id="hwdashboard-table">
<thead>
<tr>
<th>ABC<th>
<th>ABC<th>
<th>ABC<th>
<th>ABC<th>
<th>ABC<th>
<th>ABC<th>
<th>ABC<th>
</tr>
</thead>
<tbody
*ngFor="let x of (pagination ? (issues | FilterPipe: ticketNumber | paginate: {id: 'listing_pagination',itemsPerPage: itemsPerpage,currentPage: currentPage,totalItems: totalRec}) : (issues | FilterPipe: ticketNumber));let i=index;">
<tr data-toggle="collapse" [attr.data-target]="'#tablerow-'+i"
class="accordion-toggle">
<td>{{x.1}}</td>
<td>{{x.2}}</td>
<td>{{x.3}}</td>
<td>{{x.4}}</td>
<td>{{x.5}}</td>
<td>{{x.6}}</td>
<td>{{x.7}}</td>
<td>{{x.8}}</td>
<td>{{x.9}}</td>
</tr>
</tbody>
</table>
</section>
CSS
table {
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
width: 250%;
table-layout: fixed;
box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.2), 1px 2px 4px 1px rgba(0, 0, 0, 0%);
}
th {
text-align: left;
font-weight: 800;
font-size: 12px;
color: black;
text-transform: uppercase;
background-color: #f0f0f0;
position: sticky;
}
td {
text-align: left;
vertical-align: middle;
font-size: 14px;
border-bottom: solid 1px #a6a6a6;
word-wrap: break-word;
font-family: 'Roboto', sans-serif;
text-transform: capitalize;
}
tr{
cursor: pointer;
}
.table-section {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
padding-bottom: 20px;
}
thead{
position: sticky;
}
That can happen for many reasons:
Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element.
Position sticky may not work correctly if any parent element has a set height.
Many browsers still do not support sticky positioning. Check out which browsers support position: sticky.
Check if an ancestor element has overflow set (e.g. overflow:hidden); try toggling it. You may have to go up the DOM tree higher than you expect.
This may affect your position:sticky on a descendant element.
Simple example
Shouldn't be hard to add your classes and layout.
body {
margin: 0;
padding: 2rem;
}
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th, td {
padding: 0.25rem;
}
tr.red th {
background: red;
color: white;
}
tr.green th {
background: green;
color: white;
}
tr.purple th {
background: purple;
color: white;
}
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
<table>
<thead>
<tr class="red">
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Quas!</td>
<td>Velit.</td>
<td>Quisquam?</td>
<td>Rerum?</td>
<td>Iusto?</td>
</tr>
<tr>
<td>Voluptates!</td>
<td>Fugiat?</td>
<td>Alias.</td>
<td>Doloribus.</td>
<td>Veritatis.</td>
</tr>
<tr>
<td>Maiores.</td>
<td>Ab.</td>
<td>Accusantium.</td>
<td>Ullam!</td>
<td>Eveniet.</td>
</tr>
<tr>
<td>Hic.</td>
<td>Id!</td>
<td>Officiis.</td>
<td>Modi!</td>
<td>Obcaecati.</td>
</tr>
<tr>
<td>Soluta.</td>
<td>Ad!</td>
<td>Impedit.</td>
<td>Alias!</td>
<td>Ad.</td>
</tr>
<tr>
<td>Expedita.</td>
<td>Quo.</td>
<td>Exercitationem!</td>
<td>Optio?</td>
<td>Ipsum?</td>
</tr>
<tr>
<td>Commodi!</td>
<td>Rem.</td>
<td>Aspernatur.</td>
<td>Accusantium!</td>
<td>Maiores.</td>
</tr>
<tr>
<td>Omnis.</td>
<td>Cumque?</td>
<td>Eveniet!</td>
<td>Mollitia?</td>
<td>Vero.</td>
</tr>
<tr>
<td>Error!</td>
<td>Inventore.</td>
<td>Quasi!</td>
<td>Ducimus.</td>
<td>Repudiandae!</td>
</tr>
<tr>
<td>Dolores!</td>
<td>Necessitatibus.</td>
<td>Corrupti!</td>
<td>Eum.</td>
<td>Sunt!</td>
</tr>
<tr>
<td>Ea.</td>
<td>Culpa?</td>
<td>Quam?</td>
<td>Nemo!</td>
<td>Sit!</td>
</tr>
<tr>
<td>Veritatis!</td>
<td>Facilis.</td>
<td>Expedita?</td>
<td>Ipsam!</td>
<td>Omnis!</td>
</tr>
<tr>
<td>Vitae.</td>
<td>Cumque.</td>
<td>Repudiandae.</td>
<td>Ut?</td>
<td>Sed!</td>
</tr>
<tr>
<td>Accusantium.</td>
<td>Adipisci.</td>
<td>Sit.</td>
<td>Maxime.</td>
<td>Harum.</td>
</tr>
<tr class="green">
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
<tr>
<td>Qui!</td>
<td>Accusamus?</td>
<td>Minima?</td>
<td>Dolorum.</td>
<td>Molestiae.</td>
</tr>
<tr>
<td>Vero!</td>
<td>Voluptatum?</td>
<td>Ea?</td>
<td>Odit!</td>
<td>A.</td>
</tr>
<tr>
<td>Debitis.</td>
<td>Veniam.</td>
<td>Fuga.</td>
<td>Alias!</td>
<td>Recusandae!</td>
</tr>
<tr>
<td>Aperiam!</td>
<td>Dolorum.</td>
<td>Enim.</td>
<td>Sapiente!</td>
<td>Suscipit?</td>
</tr>
<tr>
<td>Consequuntur.</td>
<td>Doloremque.</td>
<td>Illum!</td>
<td>Iste!</td>
<td>Sint!</td>
</tr>
<tr>
<td>Facilis.</td>
<td>Error.</td>
<td>Fugiat.</td>
<td>At.</td>
<td>Modi?</td>
</tr>
<tr>
<td>Voluptatibus!</td>
<td>Alias.</td>
<td>Eaque.</td>
<td>Cum.</td>
<td>Ducimus!</td>
</tr>
<tr>
<td>Nihil.</td>
<td>Enim.</td>
<td>Earum?</td>
<td>Nobis?</td>
<td>Eveniet.</td>
</tr>
<tr>
<td>Eum!</td>
<td>Id?</td>
<td>Molestiae.</td>
<td>Velit.</td>
<td>Minima.</td>
</tr>
<tr>
<td>Sapiente?</td>
<td>Neque.</td>
<td>Obcaecati!</td>
<td>Earum.</td>
<td>Esse.</td>
</tr>
<tr>
<td>Nam?</td>
<td>Ipsam!</td>
<td>Provident.</td>
<td>Ullam.</td>
<td>Quae?</td>
</tr>
<tr>
<td>Amet!</td>
<td>In.</td>
<td>Officia!</td>
<td>Natus?</td>
<td>Tempore?</td>
</tr>
<tr>
<td>Consequatur.</td>
<td>Hic.</td>
<td>Officia.</td>
<td>Itaque?</td>
<td>Quasi.</td>
</tr>
<tr>
<td>Enim.</td>
<td>Tenetur.</td>
<td>Asperiores?</td>
<td>Eos!</td>
<td>Libero.</td>
</tr>
<tr>
<td>Exercitationem.</td>
<td>Quidem!</td>
<td>Beatae?</td>
<td>Adipisci?</td>
<td>Accusamus.</td>
</tr>
<tr>
<td>Omnis.</td>
<td>Accusamus?</td>
<td>Eius!</td>
<td>Recusandae!</td>
<td>Dolor.</td>
</tr>
<tr>
<td>Magni.</td>
<td>Temporibus!</td>
<td>Odio!</td>
<td>Odit!</td>
<td>Voluptatum?</td>
</tr>
<tr>
<td>Eum.</td>
<td>Animi!</td>
<td>Labore.</td>
<td>Alias!</td>
<td>Fuga.</td>
</tr>
<tr>
<td>Quia!</td>
<td>Quis.</td>
<td>Neque?</td>
<td>Illo.</td>
<td>Ad.</td>
</tr>
<tr>
<td>Officiis.</td>
<td>Exercitationem!</td>
<td>Adipisci?</td>
<td>Officiis?</td>
<td>In?</td>
</tr>
<tr>
<td>Voluptates?</td>
<td>Voluptatum.</td>
<td>Nihil.</td>
<td>Totam?</td>
<td>Quisquam!</td>
</tr>
<tr>
<td>Soluta.</td>
<td>Tempore!</td>
<td>Cupiditate.</td>
<td>Beatae.</td>
<td>Perspiciatis.</td>
</tr>
<tr>
<td>Porro.</td>
<td>Officia?</td>
<td>Error.</td>
<td>Culpa?</td>
<td>Fugit.</td>
</tr>
<tr>
<td>Et?</td>
<td>Nemo.</td>
<td>Nisi?</td>
<td>Totam!</td>
<td>Voluptate.</td>
</tr>
<tr>
<td>Saepe?</td>
<td>Vero.</td>
<td>Amet?</td>
<td>Illo!</td>
<td>Laborum!</td>
</tr>
<tr class="purple">
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
<tr>
<td>Atque!</td>
<td>Tenetur.</td>
<td>Optio.</td>
<td>Iure.</td>
<td>Porro.</td>
</tr>
<tr>
<td>Atque.</td>
<td>Alias.</td>
<td>Doloremque.</td>
<td>Velit.</td>
<td>Culpa.</td>
</tr>
<tr>
<td>Placeat?</td>
<td>Necessitatibus.</td>
<td>Voluptate!</td>
<td>Possimus.</td>
<td>Nam?</td>
</tr>
<tr>
<td>Illum!</td>
<td>Quae.</td>
<td>Expedita!</td>
<td>Omnis.</td>
<td>Nam.</td>
</tr>
<tr>
<td>Consequuntur!</td>
<td>Consectetur!</td>
<td>Provident!</td>
<td>Consequuntur!</td>
<td>Distinctio.</td>
</tr>
<tr>
<td>Aperiam!</td>
<td>Voluptatem.</td>
<td>Cupiditate!</td>
<td>Quae.</td>
<td>Praesentium.</td>
</tr>
<tr>
<td>Possimus?</td>
<td>Qui.</td>
<td>Consequuntur.</td>
<td>Deleniti.</td>
<td>Voluptas.</td>
</tr>
<tr>
<td>Hic?</td>
<td>Ab.</td>
<td>Asperiores?</td>
<td>Omnis.</td>
<td>Animi!</td>
</tr>
<tr>
<td>Cupiditate.</td>
<td>Velit.</td>
<td>Libero.</td>
<td>Iste.</td>
<td>Dicta?</td>
</tr>
<tr>
<td>Consequatur!</td>
<td>Nobis.</td>
<td>Aperiam!</td>
<td>Odio.</td>
<td>Nemo!</td>
</tr>
<tr>
<td>Dolorem.</td>
<td>Distinctio?</td>
<td>Provident?</td>
<td>Nisi!</td>
<td>Impedit?</td>
</tr>
<tr>
<td>Accusantium?</td>
<td>Ea.</td>
<td>Doloribus.</td>
<td>Nobis.</td>
<td>Maxime?</td>
</tr>
<tr>
<td>Molestiae.</td>
<td>Rem?</td>
<td>Enim!</td>
<td>Maxime?</td>
<td>Reiciendis!</td>
</tr>
<tr>
<td>Commodi.</td>
<td>At.</td>
<td>Earum?</td>
<td>Fugit.</td>
<td>Maxime?</td>
</tr>
<tr>
<td>Eligendi?</td>
<td>Quis.</td>
<td>Error?</td>
<td>Atque.</td>
<td>Perferendis.</td>
</tr>
<tr>
<td>Quidem.</td>
<td>Odit!</td>
<td>Tempore.</td>
<td>Voluptates.</td>
<td>Facere!</td>
</tr>
<tr>
<td>Repudiandae!</td>
<td>Accusamus?</td>
<td>Soluta.</td>
<td>Incidunt.</td>
<td>Aliquid?</td>
</tr>
<tr>
<td>Quisquam?</td>
<td>Eius.</td>
<td>Obcaecati?</td>
<td>Maxime.</td>
<td>Nihil.</td>
</tr>
<tr>
<td>Minus.</td>
<td>Magni?</td>
<td>Necessitatibus?</td>
<td>Asperiores.</td>
<td>Iure.</td>
</tr>
<tr>
<td>Ipsa!</td>
<td>Temporibus.</td>
<td>Non!</td>
<td>Dolore.</td>
<td>Veritatis.</td>
</tr>
<tr>
<td>Ea!</td>
<td>Officia?</td>
<td>Doloribus?</td>
<td>Deleniti?</td>
<td>Dolorem!</td>
</tr>
<tr>
<td>Sequi?</td>
<td>Molestias!</td>
<td>Nesciunt.</td>
<td>Qui.</td>
<td>Doloribus?</td>
</tr>
<tr>
<td>Id.</td>
<td>Enim?</td>
<td>Quam!</td>
<td>Sunt!</td>
<td>Consequuntur.</td>
</tr>
<tr>
<td>Reprehenderit?</td>
<td>Ut?</td>
<td>Veritatis!</td>
<td>Corporis!</td>
<td>Ipsa.</td>
</tr>
<tr>
<td>Blanditiis!</td>
<td>Veniam!</td>
<td>Tenetur.</td>
<td>Eos?</td>
<td>Repellat!</td>
</tr>
<tr>
<td>Enim?</td>
<td>Atque!</td>
<td>Aspernatur?</td>
<td>Fugit.</td>
<td>Voluptatibus!</td>
</tr>
<tr>
<td>Nihil.</td>
<td>Distinctio!</td>
<td>Aut!</td>
<td>Rerum!</td>
<td>Dolorem?</td>
</tr>
<tr>
<td>Inventore!</td>
<td>Hic.</td>
<td>Explicabo.</td>
<td>Sit.</td>
<td>A.</td>
</tr>
<tr>
<td>Inventore.</td>
<td>A.</td>
<td>Nam.</td>
<td>Beatae.</td>
<td>Consequatur.</td>
</tr>
<tr>
<td>Eligendi.</td>
<td>Illum.</td>
<td>Enim?</td>
<td>Dignissimos!</td>
<td>Ducimus?</td>
</tr>
<tr>
<td>Eligendi!</td>
<td>Fugiat?</td>
<td>Deleniti!</td>
<td>Rerum?</td>
<td>Delectus?</td>
</tr>
<tr>
<td>Sit.</td>
<td>Nam.</td>
<td>Eveniet?</td>
<td>Veritatis.</td>
<td>Adipisci!</td>
</tr>
<tr>
<td>Nostrum?</td>
<td>Totam?</td>
<td>Voluptates!</td>
<td>Ab!</td>
<td>Consequatur.</td>
</tr>
<tr>
<td>Error!</td>
<td>Dicta?</td>
<td>Voluptatum?</td>
<td>Corporis!</td>
<td>Ea.</td>
</tr>
<tr>
<td>Vel.</td>
<td>Asperiores.</td>
<td>Facere.</td>
<td>Quae.</td>
<td>Fugiat.</td>
</tr>
<tr>
<td>Libero?</td>
<td>Molestias.</td>
<td>Praesentium!</td>
<td>Accusantium!</td>
<td>Tenetur.</td>
</tr>
<tr>
<td>Eveniet.</td>
<td>Quam.</td>
<td>Quibusdam.</td>
<td>Eaque?</td>
<td>Dolore!</td>
</tr>
<tr>
<td>Asperiores.</td>
<td>Impedit.</td>
<td>Ullam?</td>
<td>Quod.</td>
<td>Placeat.</td>
</tr>
<tr>
<td>In?</td>
<td>Aliquid.</td>
<td>Voluptatum!</td>
<td>Omnis?</td>
<td>Magni.</td>
</tr>
<tr>
<td>Autem.</td>
<td>Earum!</td>
<td>Debitis!</td>
<td>Eius.</td>
<td>Incidunt.</td>
</tr>
<tr>
<td>Blanditiis?</td>
<td>Impedit.</td>
<td>Libero?</td>
<td>Reiciendis!</td>
<td>Tempore.</td>
</tr>
<tr>
<td>Quasi.</td>
<td>Reiciendis.</td>
<td>Aut?</td>
<td>Architecto?</td>
<td>Vero!</td>
</tr>
<tr>
<td>Fuga!</td>
<td>Illum!</td>
<td>Tenetur!</td>
<td>Vitae.</td>
<td>Natus.</td>
</tr>
<tr>
<td>Dolorem?</td>
<td>Eaque!</td>
<td>Vero?</td>
<td>Quibusdam.</td>
<td>Deleniti?</td>
</tr>
<tr>
<td>Minus.</td>
<td>Accusantium?</td>
<td>Ab.</td>
<td>Cupiditate.</td>
<td>Atque?</td>
</tr>
<tr>
<td>Hic.</td>
<td>Eligendi.</td>
<td>Sit?</td>
<td>Nihil.</td>
<td>Dolor.</td>
</tr>
<tr>
<td>Quidem.</td>
<td>In?</td>
<td>Nesciunt?</td>
<td>Adipisci.</td>
<td>Neque.</td>
</tr>
<tr>
<td>Eos.</td>
<td>Incidunt!</td>
<td>Quis?</td>
<td>Quod?</td>
<td>Vitae!</td>
</tr>
<tr>
<td>Ullam!</td>
<td>Facilis.</td>
<td>Tempora!</td>
<td>Accusantium.</td>
<td>Consequuntur?</td>
</tr>
<tr>
<td>Numquam?</td>
<td>At.</td>
<td>Incidunt.</td>
<td>Tenetur?</td>
<td>Voluptatem.</td>
</tr>
<tr>
<td>Iusto?</td>
<td>Inventore.</td>
<td>Molestias.</td>
<td>Accusantium.</td>
<td>Sunt.</td>
</tr>
<tr>
<td>Repellendus!</td>
<td>Ex.</td>
<td>Magnam.</td>
<td>Odit!</td>
<td>Iste?</td>
</tr>
<tr>
<td>Id!</td>
<td>Reiciendis?</td>
<td>Rem.</td>
<td>Quae!</td>
<td>Laborum?</td>
</tr>
<tr>
<td>Exercitationem?</td>
<td>Maiores.</td>
<td>Minima.</td>
<td>Nemo!</td>
<td>Sequi.</td>
</tr>
<tr>
<td>Qui.</td>
<td>Impedit?</td>
<td>Reprehenderit.</td>
<td>Distinctio.</td>
<td>Natus?</td>
</tr>
<tr>
<td>Suscipit!</td>
<td>Tenetur.</td>
<td>Cumque!</td>
<td>Molestiae.</td>
<td>Fugiat?</td>
</tr>
<tr>
<td>Sunt?</td>
<td>Quis?</td>
<td>Officia.</td>
<td>Incidunt.</td>
<td>Voluptate.</td>
</tr>
<tr>
<td>Possimus.</td>
<td>Mollitia!</td>
<td>Eveniet!</td>
<td>Temporibus.</td>
<td>Mollitia!</td>
</tr>
<tr>
<td>Incidunt.</td>
<td>Fugiat.</td>
<td>Error.</td>
<td>Odit.</td>
<td>Cumque?</td>
</tr>
<tr>
<td>Maxime?</td>
<td>Qui!</td>
<td>Sapiente!</td>
<td>Natus.</td>
<td>Soluta?</td>
</tr>
</tbody>
</table>
You can set position="sticky" only on th elements (not thead)
th {
/* ... */
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
}
Remove overflow setting from .table-section:
.table-section {
width: 100%;
/*overflow-x: scroll;*/
/*overflow-y: hidden;*/
padding-bottom: 20px;
}

How to retain the width of table columns when hiding columns?

I have a table that has six columns, five of which can be hidden based on user selection(s). The issue that I'm having is that when a column is hidden all other columns expand to fill the space that the hidden column occupied. What I would like to occur instead is for the column to just hide and the remaining columns shift to the left while retaining the widths that they were given. None of the answers that I have found on here seem to address this particular issue.
Below is snips of both my js and css along with screen grabs.
js:
<table className="hours table table-bordered table-sm" table-layout="fixed">
<thead>
<tr>
<th scope="col"
colSpan="3"
className="row-dow"
>
Hours
</th>
<th
scope="col"
colSpan="2"
align="center"
hidden={this.state.kitchenHoursSame}
className="row-16"
>
Kitchen Hours
</th>
<th
scope="col"
colSpan="2"
align="center"
hidden={!this.state.breakfast}
className="row-16"
>
Breakfast Special
</th>
...
</tr>
<tr>
<th
scope="col"
// className="row-8 "
>
Day
</th>
<th
scope="col"
className="row-8"
>
Open
</th>
<th
scope="col"
className="row-8"
>
Close
</th>
<th
scope="col"
hidden={this.state.kitchenHoursSame}
className="row-8"
>
Open
</th>
<th
scope="col"
hidden={this.state.kitchenHoursSame}
className="row-8"
>
Close
</th>
<th
scope="col"
hidden={!this.state.breakfast}
className="row-8"
>
1234567890123
</th>
<th
scope="col"
hidden={!this.state.breakfast}
className="row-8"
>
End
</th>
...
</tr>
</thead>
<tbody>
{this.state.DOW.map((dowList, i) =>
<tr>
<th scope="row" key={dowList.i}>{dowList.long}</th>
<td>
<select name="timeofday"
value={this.state.timeofday}
onChange={this.handleInputChange}>
<option>
(open)
</option>
</select>
</td>
...
</tr>
)}
</tbody>
</table>
css:
.hours {
table-layout: fixed;
/* width: 90%; */
width: 1500px;
white-space: nowrap;
}
.hours td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row-dow {
width: 20px;
}
.row-16 {
width: 16px;
}
.row-8 {
width: 8px;
}
Any help would be appreciated even if it is being told that I shouldn't be using tables and should be using something else.
The snippet below shows you how different width defined tables behave when a column is going to be deleted.
window.addEventListener("load", () => {
const firstTDs = Array.from(
document.querySelectorAll("td:nth-child(3)")
).concat(Array.from(document.querySelectorAll("th:nth-child(3)")));
document.querySelector(".remove").addEventListener(
"click",
() => {
firstTDs.forEach(td => {
td.parentNode.removeChild(td);
});
},
{ once: true }
);
});
.full-width {
width: 100%;
}
.fixed-width {
width: 600px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<h5>Auto width</h5>
<table class="tbl mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Full width</h5>
<table class="full-width mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Fixed width</h5>
<table class="fixed-width mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Actions</h5>
<button class="remove mdl-button mdl-button--raised">Remove Quantity</button>
If you have no problem rendering table content everytime, this can be handled using css property visibility: hidden; which hides the element with space occupied in the dom. See for : visibilty hidden
Approach :
Instead of using hidden attribute on th or td, i have used class = hideColumn which is defined to hide the element.
Next border: none to remove the border from the element.
In your case, you can also use 'class' attribute to achieve this.
If this is not helpful please let me know in the comments, or if anything can be done to take this near to required solution.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
}
.hideColumn {
visibility: hidden;
border: none;
}
h2 {
font-size: 12px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<h2>Visible All Column Table</h2>
<table>
<tr>
<th >Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 1st Column Table</h2>
<table>
<tr>
<th class='hideColumn'>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td class='hideColumn'>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td class='hideColumn'>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 2nd Column Table</h2>
<table>
<tr>
<th >Company</th>
<th class='hideColumn'>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td class='hideColumn'>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td class='hideColumn'>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Approach 2:
Just make the text transparent.
.otherDiv table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
border: 1px solid #dddddd;
}
.otherDiv .hideColumn {
color: transparent;
}
h2 {
font-size: 12px;
}
.otherDiv td, th {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<div class='otherDiv'>
<h2>Visible All Column Table</h2>
<table>
<tr>
<th >Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 1st Column Table</h2>
<table>
<tr>
<th class='hideColumn'>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td class='hideColumn'>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td class='hideColumn'>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 2nd Column Table</h2>
<table>
<tr>
<th >Company</th>
<th class='hideColumn'>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td class='hideColumn'>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td class='hideColumn'>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>

How do I hide a table column in print mode?

How do I hide an entire table column in printing mode (using JS javascript:print())?
Because I'm using Bootstrap I tried its .hidden-print class to hide the last column (Operation column) in printing mode:
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th class="hidden-print">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
<td>2</td>
<td>Neo</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
<-- continued -->
</tr>
</tbody>
</table>
but it's only hide the column's content, displaying a column without content, when I need is it also hides TH and TD tags.
Is it possible to do this?
table,th,td {
border: 1px solid;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
}
#media print {
table,th,td {
border: 0px
}
button {
display: none;
}
}
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th class="hidden-print">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
<td>2</td>
<td>Neo</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
<button onclick="window.print();">Print</button>
There are issues with adding display: none; (which is what .hidden-print does) to table rows and cells because removing them from the document flow could very easily mess up the table formatting (see this question).
What about using visibility: hidden; instead?
In your case, you could try this, if you wanted to always target the last column:
#media print {
th:last-child, td:last-child {
visibility: hidden;
}
}

How to make a line in a table with CSS

I'd tried to make a line as an image below which runs through the table but it didn't work.
I would like to
make a line like the image.
set a bullet for each <td> in the 2nd table
HTML:
<table>
<tr>
<table class="a">
<tr>
<td style="width: 300px">Shuttle Bus Schedule | Make an appointment</td>
<td style="width: 220px">My Request</td>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td style="width: 300px">Need Approval by Manager</td>
<td style="width: 220px">Need Approval by Coordinator</td>
</tr>
<tr>
<td>Approved by Manager</td>
<td>Approved by Coordinator</td>
</tr>
<tr>
<td>Rejected by Manager</td>
<td>Rejected by Coordinator</td>
</tr>
</table>
</tr>
</table>
CSS:
.a {
border-bottom: 1px solid #c4c4c4;
}
Structure your table properly with table headings (<th>) instead of nested tables:
<table>
<tr>
<th style="width: 300px">Shuttle Bus Schedule | Make an appointment</th>
<th style="width: 220px">My Request</th>
</tr>
<tr>
<td>Need Approval by Manager</td>
<td>Need Approval by Coordinator</td>
</tr>
<tr>
<td>Approved by Manager</td>
<td>Approved by Coordinator</td>
</tr>
<tr>
<td>Rejected by Manager</td>
<td>Rejected by Coordinator</td>
</tr>
</table>
CSS:
th {border-bottom:1px solid #c4c4c4};
td:before {content:"\2022";}
You can see this here on jsfiddle.
The table structure is not really in good format. However to keep the same table structure you can achieve the results. See the DEMO.
Here is the CSS need to used.
.a {
border-top: 1px solid transparent;
}
table{border: 1px solid transparent;
border-collapse:collapse;}
table td{ padding:5px; margin:5px;}
table+table td:last-child{border-left:
1px solid #c4c4c4;}
table+table td:last-child:before{content:"\2022"}
table+table{border-top: 1px solid #c4c4c4; }
table.a td:last-child:before{content:" "}

How can I make <tr> wider in <thead>?

CSS Part responsible for this
thead td.info{
padding: 0px;
color: #555;
font-size: 8pt;
font-weight: normal;
}
I tried to add width: (n)px
Use colspan
See: JSFiddle
HTML:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>

Resources