I've been trying to get the column width on mobile to become 50%, but everything I've tried hasn't worked. This is the css.
#media (max-width: 768px) {
#customTable tbody { float: left; }
#customTable thead { float: left; }
#customTable thead { min-width: 120px }
#customTable td { display: block }
#customTable th { display: block }
#customTable {table-layout: fixed;}
#customTable td {width: 50%;}
#customTable td {height: 20px; overflow: hidden;}
#customTable div {height: 20px;overflow: hidden;}
}
Here is the html
<div class="table">
<table id="customTable" class="table" style="width: 100%">
<thead>
<tr>
<th><LABEL>Test 1</LABEL></td>
<th><LABEL>Test 2</LABEL></td>
<th><LABEL>Test 3</LABEL></td>
<th><LABEL>Test 4</LABEL></td>
</tr>
</thead>
<tr>
<td><LABEL>Test</LABEL></td>
<td><LABEL>Test</LABEL></td>
<td><LABEL>Test</LABEL></td>
<td><LABEL>Test</LABEL></td>
</tr>
</table>
</div>
If you want column width to adjust, using tables, you actually need to tell it NOT to behave as a table any more.
e.g. use display:block and width:50% on your #customTable td and work from there as though they are block elements.
If you want to adjust the width of columns, you should adjust the width of the th in thead.
this works on me fine.
Related
This question is asking the opposite of what usually is desired: a fixed-width table that exceeds the width of its parent div(s).
In fact, the following implementation works as expected in Chrome/Chromium based browsers:
#myTable {
border-collapse: collapse;
/* Collapse borders */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
width: 1040px;
/* Full-width */
table-layout: fixed;
}
/* This is intended to be in a media query for screens less than 768 px */
#myTable {
width: 745px;
/* Full-width + 225px */
}
td:nth-child(1),
th:nth-child(1) {
width: 51.9px;
}
td:nth-child(2),
th:nth-child(2) {
width: 158.783px;
}
td:nth-child(3),
th:nth-child(3) {
width: 225px;
}
td:nth-child(4),
th:nth-child(4) {
width: 78.2667px;
}
td:nth-child(5),
th:nth-child(5) {
width: 116.15px;
}
td:nth-child(6),
th:nth-child(6) {
width: 100.833px;
}
<div style="background-color: #f0f0f0; padding: 5px; width: 540px;">
<table id="myTable" cellspacing="0" cellpadding="2" border="1">
<thead>
<tr>
<th style="text-align:right;">col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
<tr>
<td align="right">col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
<tr>
<td align="right">col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
<tr>
</tbody>
</table>
</div>
However, when checking in Firefox and Microsoft Edge, the specified table/column widths are not honored, instead conforming to the parent div.
Most suggested solutions I've found appear to recommend applying table-layout: fixed; rule to the table, however, it's already applied in this example to no effect.
Anyone have any ideas?
Typically I use a class/ID wrapper and based on the max-width of the wrapper assign the table's width:100% which will then create the scrollbar effect with the overflow:scroll hidden property which is what I think you're looking for? If you want vertical scroll.
I never use the table-layout fixed attribute which would seem to be the problem., but then again I don't use it.
Just assign the table CSS at width:100% and use the #media with the table's wrapper based on screen size. This will work great for the column's adaptations too. You will just have to adjust accordingly.
By assigning the parent div's width inline you are creating somewhat of a roadblock for your responsive css capabilities as you cannot override inline styles. I'd change that approach.
#myTable {
border-collapse: collapse;
/* Collapse borders */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
width: 100%;
overflow: scroll hidden;
}
.tbl_wrapper{max-width: 540px;}
#media screen and (max-width: 768px){
<!--Do some edits based on screen size //-->
.tbl_wrapper{max-width: 540px;}
}
#media screen and (max-width: 1040px){
<!--Do some edits based on screen size //-->
.tbl_wrapper{max-width: 640px;}
}
<div class="tbl_wrapper" style="background-color: #f0f0f0; padding: 5px;">
<table id="myTable" cellspacing="0" cellpadding="2" border="1">
</table>
</div>
this fixed-header table deforms column when resizing window horizontally. Is there way to stop that?
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
table th {
border-left: 1px solid blue;
}
table th,
table td {
padding: 5px;
text-align: left;
border-left:1px solid blue;
}
table th, table td {
width: 150px;
}
table thead tr {
display: block;
position: relative;
}
table tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>pick_up_location</th>
<th>destination</th>
<th>instruction</th>
<th>created_at</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr>
<td>12322</td>
<td>Whanga Road</td>
<td>Crescent Street</td>
<td>Call when arrive</td>
<td>123442342331</td>
<td>comming</td>
</tr>
</tbody>
</table>
</body>
</html>
Keep in mind this fixed-header table. Mean when you have 100 rows. you can scroll the row but the header position is fixed. The display block attributes can not be removed.
UPDATE:
With Mark answer, the table looks fine but still deform at small screen. A screenshot of it
To don't have problems with resizing you have to work in height and width with %.
Like : width: 30%;
height: 40%;
Hope help you.
Do not apply an explicit width or height to tag. Instead, give it:
max-width:100%;
max-height:100%;
just modify the last two ccs declarations as follows:
table{
display: block;
position: relative;
}
table tbody {
position : relative;
overflow: auto;
width: 100%;
height: 300px;
}
Adding word-break: break-all; to all the cells makes your code work (almost, since all characters are not of the same width)
See https://jsfiddle.net/3wn1zzfn/
Your problem is that when it is not possible to fit all cells in a table, the width: 150px; is overridden, and widths are now based on length of the line.
The problem here is that you are applying display: block, you shouldn't use it on tables. Also remove px values on tables. use %, or remove it at all
Remove these lines of code:
table th,
table td {
/*width: 150px*/
}
table thead tr {
/*display: block;
position: relative;*/
}
table tbody {
/*display: block;*/
overflow: auto;
width: 100%;
height: 300px;
}
Here a codepen to show it:
http://codepen.io/sandrina-p/pen/qNYork?editors=1100
--EDIT--
before -1 please can you tell me what's wrong with my solution, to improve it?
I need to change an html <table> in order to make it responsive,
But I want to work only with css
table{
width:100px;
height:100px;
background:green;
}
.a{
width:100% !important;
background-color:Red;
}
<table>
<tbody>
<tr>
<td class="a">AAA</td>
<td class="b">BBB</td>
<td class="c">CCC</td>
</tr>
</tbody>
</table>
What I want :
Without changing HTML, I want to have the AAA for the 100% width of the screen, and "BBB" + "CCC" below (under the AAA line with BBB : 50% width, and the "CCC" too in width)
I'm trying with no success, any help please ?
Are you against changing the default display: table; of the table ?
If no, you can do like this
.a{
width:100%;
background-color:Red;
}
.b, .c { width: 49%; display: inline-block }
table, tbody, tr, td { display: block; }
Fiddle
You can use float but that sort of negates the point of using a table in the first place.
If this isn't tabular data (and the layout suggests it's not) then you really should be looking for an alternative HTML structure.
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
width: 100%;
}
td {
width: 110px;
float: left;
width: 50%;
border: 1px solid grey;
}
td.a {
width: 100%;
}
<table>
<tbody>
<tr>
<td class="a">AAA</td>
<td class="b">BBB</td>
<td class="c">CCC</td>
</tr>
</tbody>
</table>
In the following code I tried to make a long table scrollable ( with <thead> fixed ).
But the columns are not filling the table's width anymore, and thead columns are even not aligned with tbodys ones.
How to solve this ? is there another way to do the trick.
The code is here
<table>
<thead>
<tr>
<th>ROW 01</th>
<th>ROW 02</th>
</tr>
</thead>
<tbody>
<tr><td>LINE 01</td><td><img src="http://placehold.it/90x90"/></td></tr>
<tr><td>LINE 02</td><td><img src="http://placehold.it/90x90"/></td></tr>
<tr><td>LINE 03</td><td><img src="http://placehold.it/90x90"/></td></tr>
</tbody>
</table>
CSS here
table{width: 100%; background: #efefef; border-collapse: collapse }
thead, tbody{display: block}
thead{background: #555; color: white;}
tbody{height: 120px; overflow: auto}
td, th{ border: 1px solid red; }
You can try to turn your <tr> in display:table;+table-layout:fixed; It will help but columns may break from a row to another unless you set a fixed width to one or the other cell.
DEMO
Your CSS turns like:
table {
width: 100%;
background: #efefef;
border-collapse: collapse
}
thead, tbody {
display: block
}
thead {
background: #555;
color: white;
padding-right:1em;/* average width of the scroll bar of tbody */
}
tbody {
height: 120px;
overflow: auto
}
tr {/* here make those the table */
display:table;
table-layout:fixed;
width:100%;
}
td, th {/* set a width to go along with table-layout */
border: 1px solid red;
}
add this to your CSS
td:nth-child(1), th:nth-child(1) { min-width: 200px; } /* or the width you need, you may use percentages */
td:nth-child(2), th:nth-child(2) { min-width: 200px; }
since the browser adds a scrollbar, it needs to add the space for that element, thus, the misalignment will ALWAYS happen. The good news is that, in fact, you need to declare only the first column, so if you plan to use only 1 columns, just use something like this:
td:nth-child(1), th:nth-child(1) { width:20%; min-width: 200px; }
and it will be enough.
There's no way that I know to do this without declaring the width for AT LEAST the first column
try
thead, tbody{display:auto}
I have a html <table> that have dynamic width (changes with window size), and a fixed width <span> (500px).
I want to display both next to each other so that both would fill the whole width of the parent container
I want to do so only using CSS (not js)
I have been playing around with CSS but it seems to be ruining the table's width
HTML
<div class='container'>
<table class='table'>....</table>
<span class='span'>....</span>
</div>
CSS
.container {
......
}
.table {
.....
}
.span {
width: 500px;
display: inline-block; //or block if neccessary
}
You may give a try with the table-layout propertie to .container and span.
Browsers should create themselves the element missing to produce the first table-cell.
DEMO
span {
display:table-cell;
width:500px;
border:solid;
}
table {
border:solid;
margin:0;
width:100%;
}
.container {
display:table;
width:100%;
table-layout:fixed;
}
This should work
because of table-layout:fixed
and because browser should create themselves the missing element (like a tbody is always produced in a <table> when missing or when in a document is missing either tags like html or body ).
Demo
css
body, html {
margin:0;
padding:0;
}
.container {
}
table {
width: calc(100% - 500px);
border-collapse: collapse;
float: left;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
.span {
display: inline-block;
width: 500px;
height: 100px;
background: red;
}
html
<div class='container'>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gaurav</td>
<td>Singh</td>
<td>etc</td>
</tr>
<tr>
<td>Gaurav</td>
<td>Singh</td>
<td>etc</td>
</tr>
</tbody>
</table> <span class='span'>....</span>
</div>