I want to show 2 table inline, so i have tried to set its display to inline. It fails :(
What is the simplest way to set them to be shown inline?
table {
display: inline;
}
table, td, th {
border: 1px solid black;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
Try this.
If you want 2 table in inline style, then you have to take outer table first. And in that table's <td> you can take inner tables <table>.
<table width="1000">
<tr>
<td>
<table border="1" width="500">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</td>
<td>
<table border="1" width="500">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</td>
</tr>
</table>
Use display:inline-table.
MDN Reference
The inline-table value does not have a direct mapping in HTML. It behaves like a HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
table {
display: inline-table;
}
table,
td,
th {
border: 1px solid black;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
If you are using bootstrap, please try to utilize the column structure.
If not use table try float property.
table {
float: left;
}
here is an sample code in fiddle
Related
I am wondering if this table layout in HTML possible? here is what I have in Reactjs:
I am getting errors trying to do a colspan.
What I want to achieve is this layout:
Many thanks in advance and greatly appreciate any helps
yes it is possible with colspan, here is the example code
<table>
<tr>
<th>name</th>
<th>title</th>
<th>edit</th>
</tr>
<tr>
<td>Jhon doe</td>
<td>Sales</td>
<td>Edit</td>
</tr>
<tr>
<td colspan="3">Remark : blablabla</td>
</tr>
<tr>
<td>Jane doe</td>
<td>Sales</td>
<td>Edit</td>
</tr>
<tr>
<td colspan="3">Remark : blablabla</td>
</tr>
</table>
but you will need css to add borders
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
That's how you wanted your table to be, use colspan after which cell you need divided columns.
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
border: 1px solid black;
width: 60%;
text-align: left;
}
th,
td {
padding: 10px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Name</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td colspan="3">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td colspan="3">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td colspan="3">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
Yes, it is.
You can read this link.
But to save your time you just need to set colspan=3 in your td where you want it to be expanded.
<!DOCTYPE html>
<html>
<head>
<style>
table:first-child,
tr:nth-last-child(1) {
border: 1px solid black;
color: #ffff00;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>John</td>
<td>Wade</td>
</tr>
<tr>
<td>Liam</td>
<td>Mike</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>John</td>
<td>Wade</td>
</tr>
<tr>
<td>Liam</td>
<td>Mike</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>John</td>
<td>Wade</td>
</tr>
<tr>
<td>Liam</td>
<td>Mike</td>
</tr>
</table>
</body>
</html>
How can I select all the td elements in the last row of the first table on the webpage?
What happens is the whole table gets affected if I combine it with tr tag using the "," selector but if I code them separately then all the tables last rows get affected.
I just don't know how to combine table and tr correctly
Is this you wanted?
table:nth-child(1) tr:last-child td {
background-color: green;
}
Or:
table:first-child tr:last-child td {
background-color: green;
}
Use table:nth-child(1) for selecting only the first table itself. And then select the last row by tr:nth-last-child(1).
Try this:
table:nth-child(1) tr:nth-last-child(1) {
color: red;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>John</td>
<td>Wade</td>
</tr>
<tr>
<td>Liam</td>
<td>Mike</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>John</td>
<td>Wade</td>
</tr>
<tr>
<td>Liam</td>
<td>Mike</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>John</td>
<td>Wade</td>
</tr>
<tr>
<td>Liam</td>
<td>Mike</td>
</tr>
</table>
/html/body/table[1]/tr[5]
This path represent your last row of first table.Similarly
/html/body/table[2]/tr[5] represents last row of second table.
How to separate tbody with box-shadow from another tbody?
Like a
tbody {
margin-bottom: 16px
}
But, I don't want to use display: block on tbody.
JSFIDDLE:
http://jsfiddle.net/kw9odqjr/1/
IMG what I want:
Instead of repeating tbody many time you can used below structure:
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
border: none;
}
tbody table {
box-shadow: 0 0 0 1px black;
border-radius: 8px;
}
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</td>
</tr>
<tr><td colspan="2" height="20"></td></tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</td>
</tr>
<tr><td colspan="2" height="20"></td></tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</td>
</tr>
<tr><td colspan="2" height="20"></td></tr>
</tbody>
</table>
It's not allowed to assign margin for tbody,
you can insert a separator like this
<tbody style="box-shadow:none; height:20px;">
<tr></tr>
</tbody>
I have a table which has a column for URLs and sometimes the URL can get pretty long.
I set the table to have a specific width but there are times when the URL wouldn't even break itself and expand the table which messes up with the layout.
Here's a Fiddle for you to take a look at and I'll provide the codes below:
HTML
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>http://www.exampledomain.org/How-We-Work/General-Information/General-Opportunities/Open-Concept-Memo-Global-Test-Cases</td>
</tr>
</tbody>
</table>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Another Test</td>
<td>http://www.exampledomain.org/search?q=flagship+collaborative+research+program&btnG=Google%2BSearch&client=csiro_frontend&output=xml_no_dtd&proxystylesheet=csiro_frontend&proxyreload=0&sort=date%253AD%253AL%253Ad1&wc=200&wc_mc=1&oe=UTF-8&ie=UTF-8&ud=1&exclude_apps=1&site=Main&filter=0&getfields=*&sourcepage={CB41B120-BEE8-4511-9BED-A5E43D32381D}</td>
</tr>
</tbody>
</table>
CSS
table {
width: 500px;
margin: 5px;
}
https://jsfiddle.net/0xyhz7p0/1/
td {
word-break: break-word;
}
You can use table-layout: fixed and word-wrap: break-word;
table {
table-layout: fixed;
width: 500px;
margin: 5px;
}
td {
word-wrap: break-word;
}
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>http://www.exampledomain.org/How-We-Work/General-Information/General-Opportunities/Open-Concept-Memo-Global-Test-Cases</td>
</tr>
</tbody>
</table>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Another Test</td>
<td>http://www.exampledomain.org/search?q=flagship+collaborative+research+program&btnG=Google%2BSearch&client=csiro_frontend&output=xml_no_dtd&proxystylesheet=csiro_frontend&proxyreload=0&sort=date%253AD%253AL%253Ad1&wc=200&wc_mc=1&oe=UTF-8&ie=UTF-8&ud=1&exclude_apps=1&site=Main&filter=0&getfields=*&sourcepage={CB41B120-BEE8-4511-9BED-A5E43D32381D}</td>
</tr>
</tbody>
</table>
How can I make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
Just use <th> as the first element in the row. Then add the scope attribute, which has no visual impact, but you could use it e.g. in CSS.
<table>
<tbody>
<tr>
<th scope="row">A</th>
<td>b</td>
</tr>
<tr>
<th scope="row">C</th>
<td>d</td>
</tr>
</tbody>
</table>
See also http://www.w3.org/TR/WCAG20-TECHS/H63
How's this?
Example
CSS
thead {
float: left;
}
thead th {
display: block;
}
tbody {
float: right;
}
jsFiddle.
Update
Well, the 1, 2 should also be as column, obviously.
jsFiddle.
It also looks like IE baulks at this. You may have to trade semantic-ness for cross browser compatibility.
You can see the result here. You mean like this?
<table border="1">
<thead>
<tr>
<th></th>
<th colspan="2">Letters</th>
</tr>
<tr>
<th></th>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Numbers</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
You usually use rowspan and colspan for cells spanning multiple columns/rows.
I needed something a little different, but the answers by #alex and #marion got me started in the right direction. The problem was that when you needed many items in the table, the "columns" started stacking funny on smaller screens.
Thanks to Serge for his answer here that led me in this solution. This solution allows for scrolling horizontally and doesn't stack funny regardless of the size of the screen/window. I tested it in Chrome, Firefox, Opera, Edge, and IE11. Here's the fiddle with the correct alignment for the new "rows" and "columns": https://jsfiddle.net/berrym/6r3zvaef/21/
And just in case it disappears from JSFiddle:
<style>
table{
display:block;
white-space:nowrap;
width:100%;
}
td, th {
border-bottom: 1px solid red;
border-collapse: collapse;
}
thead {
float: left;
background: yellow;
width: 10%;
}
thead tr {
width:100%;
float:left;
}
thead th {
display: block;
}
tbody {
float: left;
width: 90%;
}
tbody tr {
display: inline-block;
}
tbody td {
float:left;
width:100%;
}
</style>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
This worked perfectly for me : (inspired from the first answer)
Example here
html :
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
css :
table, td, th {
border: 1px solid red;
}
thead {
float: left;
}
thead th {
display: block;
background: yellow;
}
tbody {
float: left;
}
tbody tr {
display: block;
float: left;
}
tbody td {
display: block;
}
If you use bootstrap, you can achieve this easily with the table-reflow style: http://v4-alpha.getbootstrap.com/content/tables/#reflow