I have some spaces around each and every <td> in the question palette. Hereby I have attached the screenshot.
Padding is the reason that there are unexpected spaces in each td and th.
So you need to remove them.
td, th {
border: 1px solid #d8dcdd;
text-align: left;
padding: none;
}
And I am not sure but, it seems like the border is useless in your picture.
So remove it also.
td, th {
border: none;
padding: none;
}
Related
This question already has an answer here:
select the whole <td> on click instead of only the <a> inside of it
(1 answer)
Closed 7 years ago.
I have a table where I have some <a>'s, what I want: make clickable the full <td> which contains those <a>'s.
Pasting my code will explain what I want better
<td>
<a><span>{{:: row.spread.spread}} ({{:: row.spread.moneyLine}})</span></a>
</td>
for now the only clickable area is the one with red border
Here my css
td {
border-bottom: 0;
font-weight: bold;
padding: get-space(x-small) + 2;
text-align: center;
vertical-align: middle;
a {
border: 1px solid red;
}
OK, all I need is take approach of the full td and make them clickable instead of only be able to click over the links, is that clear for you?
Remove padding from the td and add it to the a, like this:
td {
border-bottom: 0;
font-weight: bold;
padding: 0;
text-align: center;
vertical-align: middle;
a {
border: 1px solid red;
display: block;
padding: get-space(x-small) + 2;
}
}
Also, make sure you set display: block on the anchor element.
in jQuery
$('td').click(function() { window.location = $('a',this).attr('href') });
add to your CSS to improve the UX
td { cursor: pointer }
I'd like to set a background and a rounded border on a <tbody/>, such as
tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }
However, when I try this in Codepen, the border and background color display, but the <tbody/> still has square corners.
I'm able to work around this problem using a series of :last-child and :first-child selectors to apply the radius to individual tds on the corners, as for example
tbody tr:first-child td:first-child { border-top-left-radius: 15px; }
This version does what I want (at least, under firefox) but also feels extremely verbose and hacky, a problem that'll only get worse when I add the prefixed versions for compatibility (-moz-, -webkit- etc), and support for <th/> elements in addition to <td/>. Is there a succinct, pure-css way of getting this behavior?
Assuming you have collapsed the borders in the table, simply set display:block on the tbody and apply the border-radius.
Codepen example
CSS
table {
width: 100%;
border-collapse: collapse;
display: block;
width: 600px;
}
tbody {
background: #ccf;
border: 1px solid black;
border-radius: 15px;
display: block;
}
th, td {
width: 200px;
}
td, th {
padding: 5px;
text-align: center;
}
Picked up a friend's CSS project to help out. I'm not an expert in CSS, here it goes:
I can't seem to find a direct answer. I am creating a table and I want 2 types of TH class that uses differnet background color in a table.
(also i might need some help on the DIV tag)
The css I'm using is like this can someone tell me what am I doing wrong?
<div class="one"><div class="two">
<table>
<TR><TH> one color </TH></TR>
<TR><TH class="color">differnet color </TH></TR>
</table></div></div>
.one .two th {
padding: 5px 10px;
border: 1px solid #d9d9d9;
background: #000000;
}
.one .two th .color{
padding: 5px 10px;
border: 1px solid #d9d9d9;
background: #ffffff;
}
Remove the space between th and .color
Otherwise you're looking for a .color descendant element inside the th, not for the class on the th itself.
I have a simple html table like this:
<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
<tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
<tr class="even"><td>Value 3</td><td>Value 4</td></tr>
<tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
<tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
</tbody>
</table>
And I would like to style it the following way:
header row with a box-shadow
whitespace between the header row and the first body row
I have tried different things:
table {
/* collapsed, because the bottom shadow on thead tr is hidden otherwise */
border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th { background-color: #ccc; }
tr.even td { background-color: yellow; }
tr.odd td { background-color: orange; }
/* I would like spacing between thead tr and tr.first-row */
tr.first-row {
/* This doesn't work because of border-collapse */
/*border-top: 2em solid white;*/
}
tr.first-row td {
/* This doesn't work because of border-collapse */
/*border-top: 2em solid white;*/
/* This doesn't work because of the td background-color */
/*padding-top: 2em;*/
/* Margin is not a valid property on table cells */
/*margin-top: 2em;*/
}
See also: http://labcss.net/#8AVUF
Does anyone have any tips on how I could do this? Or achieve the same visual effect (i.e. bod-shadow + spacing)?
I think I have it in this fiddle and I updated yours:
tbody:before {
content: "-";
display: block;
line-height: 1em;
color: transparent;
}
EDIT better & simpler:
tbody:before {
content:"#";
display:block;
line-height:10px;
text-indent:-99999px;
}
This way text is really invisible
Moreover you can use Zero-Width Non-Joiner to minimize sinsedrix CSS:
tbody:before {line-height:1em; content:"\200C"; display:block;}
This will give you some white space between the header and table content
thead tr {
border-bottom: 10px solid white;
}
Although setting the border colour is a bit of a cheat method, it will work fine.
Form investigation, you can't set box-shadow to a table row, but you can to table cells:
th {
box-shadow: 5px 5px 5px 0px #000000 ;
}
(I'm not sure how you want the shadow to look like, so just adjust the above.)
This worked for me on Chrome (for other browsers I don't know).
.theTargethead::after
{
content: "";
display: block;
height: 1.5em;
width: 100%;
background: white;
}
Such css code creates an empty white space between the thead and the tbody of the table.
If I set the background to transparent, the first column of the above tr > th elements shows its own color (green in my case) making about the first 1 cm of the ::after element green too.
Also using the "-" sign in the row content : "-"; instead of the empty string "" can create problems when exporting the printed pages to file, i.e. pdf. Of course this is parser/exporter dependent.
Such exported file opened with a pdf editor (for ex.: Ms word, Ms Excel, OpenOffice, LibreOffice, Adobe Acrobat Pro) could still contain the minus sign. The empty string doesn't have the same issue.
No problems in both cases if the printed html table is exported as image: nothing is rendered.
I didn't notice any issue even using
content : "\200C";
So box-shadow doesn't work well on the tr element... but it does work on a pseudo content element; sinsedrix put me on the right track and this is what I ended up with:
table {
position: relative;
}
td,th {padding: .5em 1em;}
tr.even td { background-color: yellow; }
tr.odd td { background-color: orange; }
thead th:first-child:before {
content: "-";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
box-shadow: 0 1px 10px #000000;
padding: .75em 0;
background-color: #ccc;
color: #ccc;
}
thead th {
padding-bottom: 2em;
}
While all the solutions above are great, the result is inconsistent across browsers, so I figured out a better way to do it based on my heinous experience with email templates.
Just add a dummy tbody in-between the actual tbody and the thead, nested in the dummy tbody should be a td with height set to the desired spacing. Example below
<table>
<thead>
<tr>
<td>
</td>
</tr>
</thead>
// Dummy tbody
<tbody>
<tr>
<td class="h-5"></td>
</tr>
</tbody>
// Actual tbody
<tbody class="rounded shadow-outline">
<tr v-for="(tableRow, i) in tableBody" :key="`tableRow-${i}`">
<td v-for="tableRowItem in tableRow" :key="tableRowItem" class="table-body">
{{ tableRowItem }}
</td>
</tr>
</tbody>
</table>
This should do the trick:
table {
position: relative;
}
thead th {
// your box shadow here
}
tbody td {
position: relative;
top: 2rem; // or whatever space you want between the thead th and tbody td
}
And this should play nice with most browsers.
I have CSS definitions for various elements around Table as shown below (Details omitted, only style names for reference).
table.entities {
border: 1px solid #c5d7ef;
border-collapse: collapse;
width: 100%;
margin-bottom: 0;
}
table.entities th, table.entities td {
padding: .25em 1.5em .5em .5em;
}
table.entities th {
font-weight: bold;
text-align: left;
background: #e5ecf9;
white-space: nowrap;
}
table.entities th a, table.entities th a:visited {
color: black;
text-decoration: none;
}
table.entities td {
background-color: #fff;
text-align: left;
vertical-align: top;
cursor: pointer;
}
table.entities tr.even td {
background-color: #f9f9f9;
}
And I apply the styles for even rows like:
flexTable.getRowFormatter().getElement(row).setClassName("even");
But for some reason, the header styles are not applied to table. Here is what I have tried
As it is I would expect th to apply style to first row, but not sure if that is a valid assumption to make
Changed the header style from th to something like theader and then explicitely applied to first row using row formatter for first row. I tried first row value as 1 & 0 both but either didn't give me results
Can anyone help me spotting where I might be going wrong?
I am pretty sure that the FlexTable does not render <th> tags. Everything is contained in the <tbody>.
You must also remember that the <tr> tag is pretty much unstylable so to style the whole row you need to apply the same style to all child <td> tags.
tr.someStyle td {
/* all styles that apply to the row */
}
If you post your actual styles and what is not being applied, maybe we can help further.