I want to make a table that have only one title at the center and two or three columns as of this picture. https://drive.google.com/open?id=1IDfBI09c5Oo4HYJKTmIb5LY97HFVfJLr
I tried the following to complete table as shown in picture above but it is not being properly aligned exactly as of picture.
<table>
<tr>
<th>Title</th>
</tr>
<tr>
<td>A</td>
<td>some textt</td>
</tr>
<tr>
<td>B</td>
<td>b</td>
</tr>
<tr>
<td>C</td>
<td>c</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
Use colspan=2 to make the th cell span two columns.
Add a bit of css to format the table as desired
table{border-collapse:collapse;}
tr,td{border:1px solid #aaa;}
td,th{text-align:center;padding:5px 10px;}
<table>
<tr>
<th colspan=2>Title</th>
</tr>
<tr>
<td>A</td>
<td>some textt</td>
</tr>
<tr>
<td>B</td>
<td>b</td>
</tr>
<tr>
<td>C</td>
<td>c</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
Updated
To show centering of table header.
Also note that <table> is 1990s tech. A much better replacement has been recently introduced: CSS Grid. CSS Grid uses DIV structures instead of tables, and new CSS3 instructions that format the divs into table structures. It is MUCH more flexible than the old <table></table> structure, and, frankly, easier (once the table has become complex). References:
W3Schools basic intro
CSSTricks Complete Guide
GridByExample
NB: this final one by the editor of the excellent SmashingMagazine
Added colspan the html attribute for table tag, please following of the code.
<table>
<tr>
<th colspan="2">Title</th>
</tr>
<tr>
<td>A</td>
<td>a</td>
</tr>
<tr>
<td>B</td>
<td>b</td>
</tr>
<tr>
<td>C</td>
<td>c</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
Related
My table is 100% width, how can I say in CSS: "the width of columns 2 and 3 should be as small as possible, without the content breaking."
I added style width, but it's not very recommended for the responsive. I didn't found any rule to do this.
<table style="width: 100%;" >
<tbody>
<tr>
<th>Name : long width</th>
<th>Value</th>
<th>ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
<p>I would like to do a bit like this (but of course without specific width) :</p>
<table style="width: 100%;" >
<tbody>
<tr>
<th>Name : long width</th>
<th style="width:40px">Value</th>
<th style="width:40px">ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
Thank you !
You can set the width on table cells and it'll still expand to fit the content. Set the width to 0 and to stop it breaking can use the white-space:nowrap; css property. Just apply it to the columns you need using the nth-child() (and derivatives) selectors. It's also good to style your table in css rather than adding the style attribute to each cell, mainly when debugging problems. See the following example:
table {
width:100%;
}
table td:last-child, table td:nth-last-child(2) {
width:0px;
white-space:nowrap;
}
<table>
<tbody>
<tr>
<th>Name : long width</th>
<th>Value</th>
<th>ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes and No</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
More info here on css selectors the white-space property
th {
width: 100%;
}
<table style="width: 100%;" >
<tbody>
<tr>
<th>Name : long width</th>
<th>Value</th>
<th>ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
How to transform asjson, asxml or an html table to a string while considering this: the string should be prepared in a way to be rendered "like a table", i. e. columns and the cells, especially nested tables with their header lines and cells, should be displayed in a well readable fashion. The string should be "built" and rendered to resemble such an HTML example (respecting also nested tables with their header lines, without borders):
<table border = "1px solid black;">
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>
<p>test</p>
</td>
<td>
<table border = "1px solid black;">
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>test</td>
<td>
<table border = "1px solid black;">
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
</tr>
</table>
</td>
</tr>
</table>
I made a table inside a div to make it scrollable;
<div style="overflow-y: scroll; height:100px; width:100px;">
<table
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
</tbody>
</table>
</div>
This table is scrollable from top to bottom. How can I make the table's overflow start at the bottom and make it scroll upwards?
You need to use javascript for this. Using scrollTop for accessing the scroll offset from the top (default is 0). So you have to get the div's height and set the scrollTop of the div to its height. To get the height, I used getBoundingClientRect().height
let tableDiv = document.getElementById('main');
tableDiv.scrollTop = tableDiv.getBoundingClientRect().height;
<div id="main" style="overflow-y: scroll; height:100px; width:100px;">
<table
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
</tbody>
</table>
</div>
Your HTML content:
<div class="scorllable-table" id="scrollTable">
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
</tbody>
</table>
</div>
Your CSS content:
.scorllable-table {
overflow-y: scroll;
height: 100px;
width: 100px;
}
If you want to do this using JavaScript only, then please try with this.
var scrollableDiv = document.getElementById("scrollTable");
scrollableDiv.scrollTop = scrollableDiv.scrollHeight;
If you want to do this using jQuery, then use the below code.
$("#scrollTable").scrollTop($("#scrollTable")[0].scrollHeight);
If you want to smooth scroll, then try with this.
$('#scrollTable').stop().animate({
scrollTop: $('#scrollTable')[0].scrollHeight
}, 500);
Enjoy, Thanks. :)
Why doesn't the top "1 2 3" line up with the bottom "1 2 3"?
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td rowspan="3">⟶</td>
<td>b</td>
<td rowspan="3">⟶</td>
<td>c</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
All rows need to have the same number of cells, or if rowspans are used, those have to sum up with the number of regular (not-rowspanning) cells.
Your first row has 3 cells, the second one 6. That can't work. If you insert those row-spanning cells in the first row (like in my adaption of your snippet below), it will work.
td { border: 1px solid #ddd; }
<table>
<tr>
<td>1</td>
<td rowspan="3">⟶</td>
<td>2</td>
<td rowspan="3">⟶</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Let's say that is my html code:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I want to paint only the inner table (A,B,C,D,E,F) to red (background-color:red)
Important to note - there is no "class" or "id" on purpose!!! I want a solution without it...
table table td {
background-color: red;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
this selector basically means: table inside table
table table{
background-color: red;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
You could use table table { ... }. That should apply only to tables nested within another table tag. Or explicitely table > tbody > tr > td > table { ... }.
Hope this helps,
Chris.
Use selector like:
table table {
background-color: red;
}
Translation: table inside table.
Initially I misunderstood how to use the nth-child() psudeo-class. I understand it now. the below code will do what you ask.
To get the inner table you need to access the inner table rows. There are in fact other ways to do this using the nth formula however this is the simplest I can think of.
3 translates to the 3rd table row inside the initial table tag.
table tr:nth-child(3){
background: red;
}
https://jsfiddle.net/USERALPHA32/ufjqgewa/1/
And this will also do what you ask. The difference between this fiddle and the one above is that this one will access the nested table directly https://jsfiddle.net/USERALPHA32/ufjqgewa/3/
table tr table:nth-child(1){
background: red;
}
__________________________ABOVE IS CORRECT__________________________________
__________________________BELOW IS WRONG____________________________________
to get to a table inside a table you would do:
table:nth-child(2) {
background: red;
}
I believe you could use the nth-child selector. Though this may cause issue with cross browser support.
https://www.sitepoint.com/web-foundations/nth-childn-css-selector/