Equal width columns in long bootstrap table - css

In the above table to achieve equal width columns I have used <td class="col-md-1"></td>. But only the first few columns are equal width as shown in the image. As this is a long table I would like to scroll horizontally so that the table can maintain the required column width. but this table wouldn't grow. I even tried table{ width:auto !important }
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
The above styles get applied for my table from bootstrap
Classes I have used in the table element - <table class="table table-bordered"></table>
Framework: Bootstrap 3

You will want to use this markup:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Source: Responsive Table Bootstrap

Try to use <th> instead.
Example of table in bootstramp.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover">
<caption class="text-center">An example of a responsive table based on Bootstrap:</caption>
<thead>
<tr>
<th>Country</th>
<th>Languages</th>
<th>Population</th>
<th>Median Age</th>
<th>Area (KmĀ²)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Argentina</td>
<td>Spanish (official), English, Italian, German, French</td>
<td>41,803,125</td>
<td>31.3</td>
<td>2,780,387</td>
</tr>
<tr>
<td>Australia</td>
<td>English 79%, native and other languages</td>
<td>23,630,169</td>
<td>37.3</td>
<td>7,739,983</td>
</tr>
<tr>
<td>Greece</td>
<td>Greek 99% (official), English, French</td>
<td>11,128,404</td>
<td>43.2</td>
<td>131,956</td>
</tr>
<tr>
<td>Luxembourg</td>
<td>Luxermbourgish (national) French, German (both administrative)</td>
<td>536,761</td>
<td>39.1</td>
<td>2,586</td>
</tr>
<tr>
<td>Russia</td>
<td>Russian, others</td>
<td>142,467,651</td>
<td>38.4</td>
<td>17,076,310</td>
</tr>
<tr>
<td>Sweden</td>
<td>Swedish, small Sami- and Finnish-speaking minorities</td>
<td>9,631,261</td>
<td>41.1</td>
<td>449,954</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">Data retrieved from infoplease and worldometers.</td>
</tr>
</tfoot>
</table>

Related

nth-child td width stretching other elements?

I have a two column layout in sharepoint online and upon page inspection I can see that it has a table with two columns. I'm trying to hide one of the columns for printing, which is working just fine, but sharepoint has specified the width of the first column as 66%. It has no class or id. I cannot change this.
I am able to change the width of the column, but the problem I'm seeing is then that the % of the columns on the inside table is also changing, even when I use a specification of nth-child(1) on the id of the outer table.
I won't submit you to the mess of code that is sharepoint but the layout is like this:
<table>
<tbody>
<tr>
<td>
<table width="100%>
<tbody>
<tr>
<td style="width: 25%>></td> <-this is getting stretched.
<td style="width: 25%>></td>
<td style="width: 25%>></td>
<td style="width: 25%>></td>
</tr>
</tbody>
</table>
</td>
<td>
</td>
</tr>
</tbody>
</table>
#media print {
table#layoutsTable td:nth-child(1) {
width: 100% !important;
}
}

Change table column header and table cell element position #media in CSS

I need to make a table responsive using CSS. When the screen size is small I must make the table headers and table cell data appear side by side. How can I do that using only CSS?
<table class="hobbies_table">
<tr>
<th>Name</th>
<th>Age</th>
<th class="hobbies">Hobby1</th>
<th class="hobbies">Hobby2</th>
<th>Contact</th>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td class="hobbies_values">Football</td>
<td class="hobbies_values">Snooker</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jack</td>
<td>30</td>
<td class="hobbies_values">Reading</td>
<td class="hobbies_values">Swimming</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jenna</td>
<td>40</td>
<td class="hobbies_values">Travelling</td>
<td class="hobbies_values">Singing</td>
<td>1234567890</td>
</tr>
</table>
.hobbies {
width: 50%;
display: flex;
}
.hobbies_values {
width: 50%;
display: flex;
}
#hobbies_table td:nth-of-type(3):before { content: attr(hobbies) }
#hobbies_table td:nth-last-of-type(2):before { content: attr(hobbies) }
I know only basic CSS. So this is what I have tried. But I came to know this is the wrong way. So how can I correct the code?
Here in #media, I want the hobbies and hobbies_values to be displayed like this:
Hobby1: Football
Hobby2: Snooker
Hobby1: Reading
Hobby2: Swimming
Hobby1: Travelling
Hobby2: Singing
May it helps :)
.hobbies_table {
width: 100%;
}
th {
display: flex;
}
tr {
width: 20%;
display: inline-grid;
}
<table class="hobbies_table">
<tr>
<th>Name</th>
<th>Age</th>
<th class="hobbies">Hobby1</th>
<th class="hobbies">Hobby2</th>
<th>Contact</th>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td class="hobbies_values">Football</td>
<td class="hobbies_values">Snooker</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jack</td>
<td>30</td>
<td class="hobbies_values">Reading</td>
<td class="hobbies_values">Swimming</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jenna</td>
<td>40</td>
<td class="hobbies_values">Travelling</td>
<td class="hobbies_values">Singing</td>
<td>1234567890</td>
</tr>
</table>
There are two popular approaches to your problem:
Solution A (Bootstrap's classic "table responsiveness")
Simply wrap the table inside a scrollable div and allow it to have its full width. Note this becomes confusing on mobile devices, especially when the user starts scrolling in both directions. A better mobile user experience is often times opening the table in a modal and allowing the user to scroll it in full screen).
Solution B (Separate markup for each case)
Have separate markup for each case, hiding the unwanted contents using #media queries. The base principle is that you duplicate content and hide the clone you don't want displayed on each responsiveness interval.
As with almost anything, no solution is clearly better than the other. It largely varies from case to case.
Here's a solution catered for your particular case (based on clarifications in comments):
.mobile_content {
display: none;
}
#media (max-width: 700px) {
.desktop_content {
display: none;
}
.mobile_content {
display: block;
}
.hobbies_values + .hobbies_values {
display: none;
}
}
<table class="hobbies_table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th class="hobbies_values">
<div class="desktop_content">Hobby1</div>
<div class="mobile_content">Hobbies</div>
</th>
<th class="hobbies_values">Hobby2</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>21</td>
<td class="hobbies_values">Football<div class="mobile_content">Snooker</div></td>
<td class="hobbies_values">Snooker</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jack</td>
<td>30</td>
<td class="hobbies_values">Reading<div class="mobile_content">Swimming</div></td>
<td class="hobbies_values">Swimming</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jenna</td>
<td>40</td>
<td class="hobbies_values">Travelling<div class="mobile_content">Singing</div></td>
<td class="hobbies_values">Singing</td>
<td>1234567890</td>
</tr>
</table>
It's actually a separate case of solution B (where, rather than completely replace the table markup - you reuse part of it and only duplicate the part that is displayed under other column's content).

Nested table issue while printing document

I have a table which I am trying to print. So the basic structure is contains a nested table both containing thead. Once I do a print, the pdf shows overlapping thead.
Please find attached link to reproduce the code. https://www.dropbox.com/s/a0l0s7blh401tg7/table.html
<table>
<thead>
<tr>
<td>heading</td>
</tr>
<tbody>
<tr>
<td>
<table>
<thead>
<tr>
<th>Heading 2</th>
</tr>
</table>
</td>
</tr>
</tbody>
</thead>
</table>
Try the following css (this only helps if you have a very plain thead an only one aswell):
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
Edit:
Regarding your question: The reason why your thead is overlapping is your table markup itself. Right now we have multiple table and thead, and also padding which is causing the overlapping. I did some research and found two different solutions you could use.
Fact 1: Only the lastest thead in your markup will be place on a second page when printed. Therefore you can check and adjust your table like this working example here, print button on the top :
<table>
<!-- thead on first page -->
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<!-- thead on first page an all following -->
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Fact 2: In my opinion the only working solution if you want all your thead information on all pages is to move all th in one thead at the top of the table, therefore you will have all informations on every page working example for this solution, print button on the top
Hopefully this helps :)

Bootstrap 3 tables column width control

I have a bootstrap table as follows:
<table class="table table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
The two column are equally spaced which is fine but if i drop an <input> element in to one of the columns this column stretches to take up about 3/4 of the overall table.
http://www.bootply.com/115049
My question is why does it do this and how can I control it?
Any help much appreciated.
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-10">Col1</th>
<th class="col-md-2">Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
This is down to the way HTML tables work. By default, table cells will scale according to their contents - any size you give them is used as a guide. So, for instance:
td {
width: 50%;
/*
If this cell is empty, it will take up half of
the table. But if the content needs to, it will
expand to take up more space.
*/
}
You can work around this by setting table-layout: fixed; in your CSS:, e.g.
table.fixed {
table-layout: fixed;
}
This makes tables adhere more strictly to the dimensions you set in CSS, rather than what the content dictates. See https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout for more information.
Once this is done, you can apply the normal Bootstrap grid classes to control the width. Apply them to the cells (td or th) in the first row and they'll repeat all the way down.
Why ? I don't know :)
How to control it ?
You can simply but a width parameter to your td, such as :
<td width=50%><input type="text"></td>
You can do it like this, or using your css file by saying all from this class should take half of the table width.
td {
width: 50%;
}

Standard fixed table width

Is there a standard method for calculating fixed width values for tables in HTML? Right now, I'm working on formatting tables on a web page to be a fixed width, I have a table that's within another table, when testing the page in IE I notice that the alignment of the colon is off as the second picture below illustrates. My intention is to make sure the colons are properly aligned as they are in Firefox and was just curious if the misalignment was due to the settings in the HTML or if it has more to do with how the browser renders the page.
Firefox:
Internet Explorer:
UPDATE:
Sorry for not providing any reference code, here's a snippet of the particular section I'm working with.
<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;">
<span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span>
<table style="width: 1000px;" align="Center" border="0">
<tbody>
<tr>
<td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td>
</tr>
<tr>
<td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td>
</tr>
<tr>
<td style="width: 1000px;">
<table style="width: 1260px;" border="0">
<tbody>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I know it's ugly, just a note, this is an ASP.Net generated webpage and I'm setting the attributes of the HTML elements pro-grammatically from the code behind. I sorta inherited this and my employer wants to keep major changes to a minimum.
UPDATE 2:
When I adjust the inner table width I can get it to align in IE when set to 1377px. For Firefox, the sweet spot for alignment is 1260px.
All you have to do is make the table columns the same width as each other.
Example of style:
table tr td:first-child { background-color:yellow; width:200px; }
HTML:
<table>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
<tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
</table>
Sorry for not directly answering to your question, but...
Stoneage is over! You really shouldn't use Tables for layouting-purposes, as they are hardly-accessible for disabled people and make your HTML-File way too big (in relation to the content).
Seperate Content and Layout, use CSS.
Make sure to place the the parts that you want to align together in one table.
<table id="layout">
<tr><td>HEADER</td>
<tr><td>
<table id="form">
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
</table>
</tr>
<tr><td>FOOTER</td>
</table>
i would create two classes, left and right and apply the left class to the <td> on the left and the right class to the <td> on the right. the left class would be something like
.left{width:100px; text-align:right;}
heres an example

Resources