I am trying to center span in tbody, but I am not sure how to do that and I don't know if this structure is valid if I don't include a tr and td elements.
html
<table class="table">
<thead>
<tr>
<th>Rank</th>
<th>
<div>Name</div>
</th>
<th>
<div>Age</div>
</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<div><span>You haven’t added any data yet</span></div>
</tbody>
</table>
css
tbody div {
display: table-row;
}
tbody div span{
display: block;
text-align: center;
width: 100%;
}
Use colspan:
<table class="table">
<thead>
<tr>
<th>Rank</th>
<th>
<div>Name</div>
</th>
<th>
<div>Age</div>
</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">You haven’t added any data yet</td>
</tr>
</tbody>
</table>
By convention you should include tr and th as well within tbody
You can use colspan to merge columns and text-align:center style to center text.
<table class="table" style="width:100%">
<thead>
<tr>
<th>Rank</th>
<th>
<div>Name</div>
</th>
<th>
<div>Age</div>
</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" style="text-align: center;">You haven’t added any data yet</td>
</tr>
</tbody>
</table>
Related
I'm trying to add vertical lines to my table that aligns with the headers and I'm using 'border-collapse: separate' as well as colspan that varies from 1 to any number. Here is an image to imagine it
Keeping in mind Cell1 has colspan of 3 and cell 2 has colspan of 2
but I would like to keep the separate border collapse for the view. My approach was to put two tables above each other one for the data with opacity:70% for example to show the table below it and the table below it should have the vertical lines with each header. However, I'm unable in anyway to put two tables in the same position.
<div id="app">
<h2>Todos:</h2>
<ol>
<table
BORDER
>
<thead>
<tr>
<th >
H1
</th>
<th
>
H2
</th>
<th
>
H3
</th>
<th
>
H4
</th>
<th
>
H5
</th>
</tr>
</thead>
<tbody>
<td colspan="3">
Cell1
</td>
<td colspan="2">
Cell2
</td>
</tbody>
</table>
</ol>
</div>
Here is a fiddle of the table
http://jsfiddle.net/vrL9s7ft/6/
I have attached a working example here http://jsfiddle.net/whjnt5o2/1/
th, td {
border: 1px solid black;
box-sizing: border-box;
height: 100px;
width: 100px;
text-align: center;
}
table{
border-spacing: 0;
}
table.background-table{
position: absolute;
}
table.background-table th, table.background-table td {
border: 1px dashed gray;
top: 0;
}
<div>
<table class="background-table">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tbody>
</table>
<table>
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
</tr>
</thead>
<tbody>
<td colspan="3">
Cell1
</td>
<td colspan="2">
Cell2
</td>
</tbody>
</table>
</div>
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
I have a nested table as follows -
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Requirement - Only TEXTA and TEXTB should be colored in red. In real scenario there are many rows. I want only the first td of each row in the parent table to be colored. I am doing something like -
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
This is not giving me any result. What is the correct way of achieving this?
Spent a while playing around with this. The best I can do is to suggest using 2 lines of CSS rather than 1. One selector to do all of the first row of td and one to set the nested ones back to how they belong.
table.parent tr:first-child td {
color: red;
}
table.nested tr:first-child td {
color: black;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
You said that..
I want only the first td of each row in the parent table to be colored
So, I am assuming you want TEXTA and TEXTC to be colored (and not TEXTB as you stated).
If thats the case, then your idea was to select elements (first td of each row) if they dont contain a specific child element (table.nested).
This is not possible with CSS2 or CSS3.
The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.
See CSS selector - element with a given child
Edit
You can use jquery/javascript to do so.
For example, to add opacity and color css properties:
$(document).ready(function(){
$('table.parent > tbody > tr > td:first-child').each(function(){
if ($(this).has('table.nested').length == 0){
$(this).css('opacity', '0.5');
$(this).css('color', 'red');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Just give some class to TEXTA & TEXTB
for example:
(html)
<td class="red-color-text">TEXTA</td>
<td class="red-color-text">TEXTB</td>
(css)
.red-color-text{color: red;}
Hello I'm trying to remove border from my table.
Here's my code :
<table class="table table-responsive" style="border:none">
<tr>
<th>First name</th>
<th>Last name </th>
</tr>
<tr>
<td>Tima</td>
<td>Zahra</td>
</tr>
<tr>
<td>Emily</td>
<td>SMITH</td>
</tr>
</table>
But it's not working. Please help me ! I'm sorry for my bad english and I hope you will understand it.
Just use following css:
.table thead tr th, .table tbody tr td {
border: none;
}
Just do following changes in head section
<style>
.borderless tr, .borderless td, .borderless th {
border: none !important;
}
</style>
and this changes in body section:
<table class="table table-responsive borderless">
<tr> <th>First name</th><th>Last name </th></tr>
<tr> <td>Tima</td> <td>Zahra</td> </tr>
<tr><td>Emily</td> <td>SMITH</td> </tr>
</table>
This will helpful to you. Thank you :)
Use the table-borderless bootstrap class. Note my table below has zebra stripes, but that is because I wanted them and has no impact on the table border. If you don't want stripes either, just remove table-striped.
<table class="table table-striped table-borderless">
<thead>
<tr>
<th scope="col">Pos</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Adam</td>
</tr>
</tbody>
</table>
I am trying to get a button that I put in a table <th> to expand the full width and height of the header column, even when a table cell in the same column is larger than the text. If I do, width 100% in css, then the button will just match the cell size, and then the title will extend beyond the button and header.
I am using the button so when the user click on it the column will sort.
This is my code just trying to do with width:
<th><button onclick="tableColumnSort(this)" style="width:100%">#descriptor.Name</button></th>
And this is how it looks without using width:
<th><button onclick="tableColumnSort(this)">#descriptor.Name</button></th>
If you set an element to width: 100% or height: 100%, it's relative to its parent element. So, if you're setting your button width: 100%, and you want it to be 100% of your header width, set a width (that's not in percentage) on the header and it'll respect it. Like this:
HTML:
<table>
<thead>
<tr>
<th>
<button>shortHeader</button>
</th>
<th>
<button>veryLongLongHeader</button>
</th>
<th>
<button>header</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table><table>
<thead>
<tr>
<th>
<button>shortHeader</button>
</th>
<th>
<button>veryLongLongHeader</button>
</th>
<th>
<button>header</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
button {
width: 100%;
}
th {
width: 100px;
}
table, th, td {
border: 1px solid #000;
}
Check out this fiddle.
Change css of the clicked th with your js, with a low gray background (#ccc it's good) and change font-size a bit, 1 or 2px. TL;DR Change the frontend to show a more elegant th with the users interactions
<table>
<thead>
<tr>
<th onclick="tableColumnSort(this); changeTH(this);">
shortHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
veryLongLongHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table><table>
<thead>
<tr>
<th onclick="tableColumnSort(this); changeTH(this);">
shortHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
veryLongLongHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
On JS:
function changeTH(container){
var ths = document.getElementsByTagName('th');
var totalThs = ths.length;
//reset all ths before set your new th style
for (i = 0; i < totalThs; i++){
ths[i].style.background = '#fff';
ths[i].style.fontSize = 'inherit';
}
container.style.background = '#ccc';
container.style.fontSize = '12px'; //or other size you prefer
}
The better way to do this is add all listeners inside a js file, it's more elegant, but my example works fine.
Make your buttons display: block.
table, th, td { border-collapse: collapse; border: 1px solid #333; }
th button { display: block; width: 100%; }
<table>
<thead>
<tr>
<th><button>DELETE</button></th>
<th><button>PARTNO</button></th>
<th><button>DLT</button></th>
<th><button>TCOUNT</button></th>
<th><button>TRANS</button></th>
</tr>
</thead>
<tbody>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
</tbody>
</table>
Is there any way to make the header align towards right?
Tested in Internet Explorer 7 only.
<html>
<style type="text/css">
th {
text-align: left;
}
</style>
<body>
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag
<th style="width: 100px; text-align: right;">Duration
</tr>
</thead>
<tbody>
<tr>
<td > one
<td> two
</tr>
</tbody>
</table>
</body>
</html>
First, close your tags. You have a lot of invalid HTML here. Second, you're mixing the table width (100%) as a percentage and the cell widths (250px, 100px) as pixel widths. These two are not compatible. Choose either one or the other and keep it consistent throughout your table.
<table style="width:350px" border="1">
<thead>
<tr>
<th style="width:250px;">Tag</th>
<th style="width:100px; text-align:right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
You aren't closing your TH tags (or your TD tags for that matter). Fix below:
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag</th>
<th style="width: 100px; text-align: right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td> one </td>
<td> two </td>
</tr>
</tbody>
</table>