I'm working on a table and one of the requirements is for each row to become bold on hover. I have this working but the widths of the columns shift when this occurs.
Is there a way I can prevent this?
table {
width: 100%;
border: 1px solid #ccc;
margin-top: 0;
border-spacing: 5px;
border-collapse: separate;
}
table tr:hover {
font-weight: 600;
}
<table>
<tr>
<td>Cell One</td>
<td>Cell Two</td>
</tr>
</table>
Specifically, it shifts the contents of the second column to the right on hover. While scrolling down the table, this ends up not looking too great.
The key is to reserve space in advance for the bold text.
In other words, when the row is hovered the text goes bold, which results in a wider table cell. But if each table cell factors in the bold text from the start (i.e., before hover), then the width will remain stable regardless of font weight.
In this answer, the content of the table cell is replicated in the title attribute, which is then used to create a bold but invisible version of the content using the ::after pseudo-element.
table {
width: 100%;
border: 1px solid #ccc;
margin-top: 0;
border-spacing: 5px;
border-collapse: separate;
}
table tr:hover {
font-weight: 600;
}
/* new */
td::after {
display: block;
content: attr(title);
font-weight: 600;
color: transparent;
height: 1px;
margin-bottom: -1px;
visibility: hidden;
overflow: hidden;
}
<table>
<tr>
<td title="Cell One">Cell One</td>
<td title="Cell Two">Cell Two</td>
</tr>
</table>
Related
I am using a table and here's a HTML snippet for the same:
th {
text-align: left;
}
td {
height: 20px;
font-size: 12px;
background-color: #000;
color: #fff;
margin-right: 20px;
border-top-left-radius: 10px;
}
<table>
<th>
<td>Exams</td>
<td>Science</td>
<td>Mathematics</td>
<td>Biology</td>
</th>
<tr>
<td>2000</td>
<td>95</td>
<td>64</td>
<td>33</td>
</tr>
</table>
What I want is to increase the distance between two column elements. I have added margin-right, but it doesn't reflect in the output. Can someone help?
You can use border-spacing in the rule for the table element to create space between the rows and columns, and padding on the cells to create additional space inside the cells (including the background).
Note: Your HTML is invalid: th elements are special ("header") cells inside a row (tr) - see changed code below.
table {
border-spacing: 10px 5px;
}
th {
text-align: left;
}
td,
th {
padding: 0 5px;
height: 20px;
font-size: 12px;
background-color: #000;
color: #fff;
border-top-left-radius: 10px;
}
<table>
<tr>
<th>Exams</th>
<th>Science</th>
<th>Mathematics</th>
<th>Biology</th>
</tr>
<tr>
<td>2000</td>
<td>95</td>
<td>64</td>
<td>33</td>
</tr>
</table>
You can use border-spacing. Unless by "gap" you just mean padding.
You can also use padding which can give the same effect that you want:
padding-right: 20px
*Note, this question has basically been overhauled from a previous version so as to be more precise. Thus some of the answers below do not completely the restructed question.
I have two sets of data which I need to display tabulated. As both sets of data need to have the column widths (but still be dynamic), I am using two <tbody>'s.
I am trying to set a heading for each of the tabulated data, in a way that the heading takes up the width of the entire <tbody>.
I have tried using table-caption, but it does not apply to the tbody, but the table itself. Meaning all captions look to go to the top of the table, regardless of where they are in the html.
To demonstrate what I am running into, see the following snippet:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
tbody:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100%;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<caption>Caption1</caption>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<caption>Caption2</caption>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
My current attempt is to use :before. But as you can see, the :before does not take up the entire width of the tbody. Even with width: 100% it does not work.
Another way I realized it could be done is to have another row for each tbody, and set colspan to equal the amount of columns for that table. Like this:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<tr>
<th colspan="2">Title1</th>
</tr>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th colspan="2">Title2</th>
</tr>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
However, the only problem there is that it does not become dynamic and requires you to know how many columns there will be ahead of time. Normally this would not be a problem but I am looking for a more dynamic solution in my case.
My question is: How does one add a caption to a tbody (not the table) in a way so that each caption relates to the applicable tbody and not the table
You just need to set the width to 100vw. This sets the width to 100% of the viewport width. For a more in-depth explanation of viewport width, see this article.
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
#tbody1:before, #tbody2:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100vw;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th, td {
padding: 4px 0px;
border: 1px solid black;
}
<table>
<tbody id="tbody1">
<tr>
<th>bob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th>dob</th>
</tr>
</tbody>
</table>
I have a table with two rows, where there is one h1 heading in the left column. The two other columns is normal paragraphs with strong text.
The two right columns in first row goes alright, but on the second row there is too much vertical space between them. It is pretty obvious that it is the h1 which increases the vertical space between them. But how can I fix that, if possible at all? Do I really need to leave the h1 out of the table?
table {
width: 80%;
margin-left: 2%;
border-collapse: separate;
border-spacing: 0 1px;
}
<table>
<tr>
<td><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td></td>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</table>
That spacing is most likely from the default margin on the h1 and p tags, reset them and see.
table {
width: 80%;
margin-left: 2%;
border-collapse: separate;
border-spacing: 0 1px;
}
td {
border: 1px solid aqua; /*for demo purpose*/
}
table h1, table p {
margin: 0; /*reset the margin*/
}
<table>
<tr>
<td><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td></td>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</tr>
</table>
Edit: I figured out (see comments below) what OP refers about the border spacing. It's both the empty <td>, and the border-collapse style. To combine those two <td>s, you can use rowspan. To get rid of the small space amount the lines, use border-collapse:collapse.
table {
width: 80%;
margin-left: 2%;
border-collapse: collapse; /*set it to collapse*/
}
td {
border: 1px solid aqua; /*for demo purpose*/
}
table h1, table p {
margin: 0;
}
<table>
<tr>
<td rowspan="2"><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p></td>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</tr>
</table>
Try removing the margin from the h1 like so.
h1 {
margin: 0;
}
There are two things you can do. First, is making the h1 smaller in height, by reducing its margin and its parent padding.
Also, you can use the rowspan attribute in the td which contains your h1 instead of having a empty td on the second row.
The HTML:
<table>
<tr>
<td rowspan="2"><h1>Some big text</h1></td>
<td><p><strong>Some</strong></p>
<td><p><strong>smaller text</strong></p></td>
</tr>
<tr>
<td><p><strong>Here come</strong></p></td>
<td><p><strong>Second row</strong></p></td>
</table>
And the CSS:
table {
width: 80%;
margin-left: 2%;
border-collapse: separate;
border-spacing: 0 1px;
}
table tr td {
padding: 0;
}
table tr td h1 {
margin: 0;
}
table tr td p {
margin: 0;
}
I am trying to add cell spacing to a html table.
I want to add spacing between cells without the outer spacing.
My problem is, that the cellspacing html attribute and border-spacing CSS property adds spacing outside too.
I would like to put cell spacing without the red (outer) part - only the yellow one.
Is it possible?
Edit:
The image was drawn by hand (MS-Paint) only for illustration.
The coloring is for debugging - so that one can see where the borders, and spacing is.
I have found a roundabout solution including some additional div-s:
.inner-spacing {
border-collapse: collapse;
background-color: yellow;
border: 2px solid black;
}
.inner-spacing td {
padding: 0;
}
.inner-spacing td > div {
width: 60px;
height: 60px;
background-color: green;
border: 2px solid black;
margin: 10px;
}
.inner-spacing tr:first-child > td > div {
margin-top: 0px;
}
.inner-spacing tr:last-child > td > div {
margin-bottom: 0px;
}
.inner-spacing tr > td:first-child > div {
margin-left: 0px;
}
.inner-spacing tr > td:last-child > div {
margin-right: 0px;
}
<table class="inner-spacing">
<tr>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
<tr>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
</table>
So to summarize, I would like the table to have border spacing with the table border collapsing onto the cells (no spacing).
I wonder if there are some other solutions - so any new solution is welcome!
This will be tricky a little bit...you will need to set display:block and border-spacing:10px for spacing between cells and same negative margin:-10px to remove the outer spacing
Stack Snippet
table {
font: bold 13px Verdana;
background: black;
margin: 30px auto;
border-spacing: 0;
}
table td {
padding: 30px;
background: red;
color: #fff;
}
table tbody {
margin: -10px;
display: block;
border-spacing: 10px;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
This is kinda tricky, you need to follow something like this:
table, td {border: 1px solid #999; border-collapse: collapse;}
table {margin: -5px;}
table td {width: 32px; height: 32px; margin: 5px;}
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Hello all I'm just trying to have my border around my table cell right around the text...not stretched the length of the entire table. Its the section with the border around it
CSS:
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
table.content_table > tbody > tr > td.results {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
}
HTML:
<table class="content_table">
<br/><br/>
<h1>Planned Vs Actual Productions Drilldown</h1>
<tr>
<td class="results">
Number of results returned: ${fn:length(beans)}
</td>
</tr>
give the text a simple span or any other block element like div p ... span with inline-block is also a block element which can have a border.
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
.border {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
display: inline-block;
}
Any Element inside a table needs to be in TD so that is is valid html... put another tr > td into your table like this
<table class="content_table">
<tr>
<td>
<h1>Planned Vs Actual Productions Drilldown</h1>
</td>
</tr>
<tr>
<td class="results">
<span class="border">Number of results returned: ${fn:length(beans)}</span>
</td>
</tr>
</table>
The answer lies in the fact that you have table width as 100%. Without any of styling at the TD level, the TD is automatically going to take the most width it can.
The bigger question though, is why you are using a table at all. This is a single column of data, no need for a table here, just use div's.
I had a similar problem with a WordPress theme. The "collapse" wasn't entirely working on the first column, because my theme's style.css "reset" had set the table width to 100%. At least for me, the "auto" width solved the problem.
<style>
table#donations { border-collapse: collapse; width:auto; }
</style>
<table id="donations">
<tr><td>Bitcoin BTC</td><td>1Prh5VnUJRQV3sARhEfQAMKv9UzGqgAMXg</td></tr>
</table>