I want to remove complete border from table cells as in shown in screen shot, i have to fill color in cells and there is white border are visible. how to make it complete remove.
It is simple table with 24 td tags and 2 tr tags, second tr tag containing div tags having background color red,blue, and gray.
Use this CSS property, this will remove the border:-
table, th, td {
border:none;
border-collapse: collapse;
}
Related
When using cellpadding="10" along with alternate row shading, it seems that the backgrounds of the alternative rows don't "expand" with the cellpadding. For example:
As you can see in the figure above, there are gaps between the background and the extra cellpadding. How do I make the background cover the entire row including the cellpadding?
Here's the HTML style behind it:
tr:nth-child(even) {background-color: #f2f2f2;}
They do, but you have to remove border-spacing from table and then adjust the cellpadding and/or the margins and paddings of the td and th elements.
By default tables have a spacing between cells, that spacing is not part of the 'content' of the cell but only of the table. Add a border on table, td and th to better understand it. For more information you better look at the MDN page about border-spacing.
Example without cellpadding:
table {
border-spacing: 0;
}
td, th {
padding: 10px 20px;
}
I have a table with a lot of table rows. Every table row have a 2px solid grey border.
My problem is that the table is a link and to show that to the user I will make the border black when hovering. But adding :hover to tr does only apply to the hovered tr but I want all tr to get a black border.
Is that possible?
Use
tbody:hover tr{
border:2px solid grey;
}
to restrict the hover to only the rows in the body. See this example fiddle
In my CSS, with Mozilla even if I put visibility: hidden on a <td> tag the background color is shown.
Open this jsfiddle. With Chrome it is okay, but with not with Mozilla.
Actually Firefox handles this situation properly to my mind. You set background color of tr but make invisible td. tr should still be visible. So it is.
Instead try this CSS:
table td,
table th {
background-color: beige;
}
Demo: http://jsfiddle.net/mTTzb/3/
You can use display: none; instead if it matches your need. Keep in mind however that contrary to visibility: hidden;, the place occupied by your content will be freed for next displayed block.
You can also apply the background style on td and th instead of tr:
th,td {
border: 1px black solid;
background-color: beige;
}
See result here:
http://jsfiddle.net/mTTzb/5/
Try changing the visibility:hidden; attribute for display:none;
The problem is in the following CSS rule:
table tr {
background-color: beige;
}
The rule states that every row on any table has a background color.
When you set the cell's visibility to hidden, although the cell remains hidden, it's space remains within the row.
That's why you can see color in the space where the cell is.
You can either set the display:none so the cell space isn't used or you can set the background color on the cells instead of rows:
table tr td,th {
background-color: beige;
}
I am trying to add border-bottom to <tr> element of table as below but it is not working
<table>
<tr style="border-bottom: 1px solid black !important;">
it is working when I add the style to <td> but not on <tr>. Can you please let me know how to fix it?
Thanks
You cannot apply a border on tr element, you need to apply a border on td, or you need to use border-collapse for your table element
Demo (Applying border-bottom to td)
Demo 2 (Applying border-bottom to tr if used border-collapse)
table {
width: 100%;
border-collapse: collapse;
}
table tr { /* Use table tr td if not using border-collapse property */
border-bottom: 1px solid #eee;
}
Note: Avoid using inline styles, you will feel hard to change them
at certain point, also, avoid using !important unless required,
consider using more specific selectors instead
I have a very simple html page:
<table>
<tr><th>header1</th><th>header2</th></tr>
<tr><td>item1</td><td>item2</td></tr>
<tr><td>item3</td><td>item4</td></tr>
</table>
With some simple css:
tr {
border:1px solid blue;
}
I would expect this to put a border around the trs but it doesn't put a border around it at all. How do I get a border around the tr?
Add table { border-collapse: collapse; }.
From the CSS2 specification:
In [the border-collapse: separate model], each cell has an individual border. [...] Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).
Your code works, if you want a border just on the row.
However, if you are looking to have the border everywhere, you will need to do this:
tr, td, th{
border:1px solid blue;
}
Example: http://jsfiddle.net/jasongennaro/83VjH/
Borders can be added to rows of table by adding border to <td> and <th> elements [This is basically a CSS trick to achieve (hack!) that as borders cannot be added to <tr> and <tbody> elements of table]. Add following styles to your CSS to get borders around rows or headers or table cells.
table {
border-collapse: collapse;
}
table td, table th {
border: solid white;
}
td {
border-color: red (just an example, can be as per your requirement);
}
Explanation:
border-collapse rule is added to whole table. It can have two other possible properties separate (default) and inherit. For their respective effects refer https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
Second rule i.e. adding border property to <td> (for data cells) and <th> (for header cells) is a must. If you don't add it, borders will not show up. In this rule border-color is white, it can be some other color of your choice instead of white. Basically, this rule will activate the borders around table cells and since the color is white nothing will show up.
And finally, add the color of your choice. This rule can be more specific to apply border to one <td> or a class of <td>.