I want my table cells to have a margin between them within same row, so I tried setting border-spacing: smth, but it also forces the left-most and right-most to have that same margin from table's outside border. Is it possible to avoid such scenario and apply spacing only between cells?
You can select the first and last td and reset their margins to 0.
td {
margin: 0 5px;
}
td:first-of-type, td:last-of-type {
margin: 0;
}
Related
I am making a simple table to display information and wanted a border at the bottom of each row. I collapsed the borders to remove the space between the rows as to avoid the doubling of borders. And it works fine but when I adjust the screen size sometimes the border seems to break or buckle where it gets displaced slightly. I'm attaching an image of the phenomenon.
Here is the whole table as well:
And here is my CSS:
table{
border-collapse: collapse;
}
tbody{
width: 100% !important;
}
th{
width: 8%;
padding-left: 4%;
font-size: 1.5vw;
padding-top: 2%;
}
td{
width: 20%;
font-size: 1.5vw;
padding-top: 2%;
}
td ul {
width: 90%;
}
td ul li {
padding-top: 10%;
text-align: center;
padding-bottom: 10%;
}
tr{
border-bottom: solid 1px black !important;
}
Is there any way around this? Or is it more a matter of my content?
Your table row borders work only as a side-effect of conflict-resolution in the border-collapse algorithm. A table row is not meant to have borders, but since the style is applied, and borders are collapsed, the browser attempts to resolve any potentially conflicting styles by applying border styles of the parent to the respective cells it houses.
What's actually being rendered is a series of cells of slightly varying height, each with its own bottom border resolved from the value taken from the parent tr element.
One alternative might be to wrap the first row with a thead element and each successive row with a tbody element, and then set them to display: block with border-bottom.
You can work out some different solutions, but the main issue here is just a misunderstanding of how borders work on table elements, and the W3C link should help to sort that out.
At small sizes this table becomes impossible to read, so I'd also recommend that you read Richard Rutter on designing tables to be read, and also avoid using percentage and viewport-based units for font-size and padding.
So I have an HTML Table that is acting as a summary table for a list of things I need to display. I have only 4 columns showing but there are approx. 20 and they're currently set to display: none;. The problem is those hidden cells are causing rows to be larger than the visible ones need. (I Would just delete the hidden ones but later functionality dictates that user's will need to be able to make those cells/columns visible)
Question: Is there a way to make the row's height as tall as the visible ones need (and nothing more) and adjust as cells/columns visibility change?
Current CSS:
table.grid {
border-collapse: collapse;
}
table.grid tr td {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
white-space: nowrap;
vertical-align: top;
}
table.grid tr td input {
display: block;
}
With this I've successfully eliminated the horizontal white-space between cells but I need to eliminate the vertical space now and I'm not sure how to overcome this little hiccup.
Try this on your hidden cells.
.class{
display:none;
line-height:0;
}
If you make a normal table with 100% width and give the cells some borders the borders will of course go around all edges of all cells. But what if you want tables where the cells are shaded but the borders are "clear" (the same colour as the containing element of the table). In this case you probably want borders to appear on the internal edges of table cells but not on the outside edges.
If there is room on the right and left you can make the table have negative margins equal to the width of the cell borders. That will make the left side flush but at 100% width the right side won't reach fully to the right. If you have 3px borders in this setup then the right side will be 6px short.
You can deal with this if you are using absolute widths for your tables but what if you need to use a % width?
A CSS way to do only internal borders of a table that uses CSS selectors that should be available in IE7:
table > tbody > tr > td {
border-left: medium solid orange;
border-top: medium solid orange; }
table > tbody > tr > td:first-child {
border-left: none; }
table > tbody > tr:first-child > td {
border-top: none; }
table {
border-spacing: 0; }
(Wonky indentation courtesy of Sass.)
Obligatory jsFiddle link: http://jsfiddle.net/inerdial/KzdUV/2/
I'm trying to fix a table header to the top of a window, but for some reason setting the widths of the <td> and <th> elements in the following way doesn't result in the elements having the same width (the column headers are not aligned with the other column cells):
th, td {
padding-left: 20px;
}
td:first-child, th:first-child {
width: 80px;
}
td:nth-child(2), th:nth-child(2) {
width: 200px;
}
td:last-child, th:last-child {
width: 320px;
padding-right: 20px;
}
Here's a jsfiddle example that illustrates this: http://jsfiddle.net/zgaPw/1/
After experimenting with it, I found that the font-size property seems to affect the width of the <td>, but I'm not sure why or how to correct it.
Can someone shed some light as to what is wrong and how to correct it? Thanks!
The width of cells are affected by their siblings (other cells), and the parent (<table>). To get the cells have the same width, define a width property on the cell which is equal to:
For each cell:
width + padding left + padding right
= 660px;
At your first row, containing the <th> elements, you have defined a width of 600px, which causes the head to shrink a little. To fix this, remove the width property on the row, or define width:660px;.
Fiddle: http://jsfiddle.net/zgaPw/4/
Can you have cellpadding or spacing just on the top/ bottom as opposed to all (T, B, L, R) ?
CSS?
td {
padding-top: 2px;
padding-bottom: 2px;
}
There is css:
table { border-spacing: 40px 10px; }
for 40px wide and 10px high
Cellspacing is all around the cell and cannot be changed (i.e. if it's set to one, there will be 1 pixel of space on all sides). Padding can be specified discreetly (e.g. padding-top, padding-bottom, padding-left, and padding-right; or padding: [top] [right] [bottom] [left];).
This might be a little better:
td {
padding:2px 0;
}