What is the best way to get a dropdown showing its full height with rounded corner table?
There are suggestions that overflow-hidden should be removed. But if it is removed the rounded corner is looking ugly. Without overflow-hidden, the dropdown is hidden after the table length.
https://play.tailwindcss.com/gZeMiyEPmm
Any help will be appreciated.
The easiest solution that I've found would be to removeoverflow-hidden and add sm:rounded-[xy]-lg (where x is b or t and y is l or r) to proper ths and tds.
To simplify things I think that it would be easier to just add this to your css:
table thead tr th:first-of-type {
#apply sm:rounded-tl-lg;
}
table thead tr th:last-of-type {
#apply sm:rounded-tr-lg
}
table tbody tr:last-of-type td:first-of-type {
#apply sm:rounded-bl-lg;
}
table tbody tr:last-of-type td:last-of-type {
#apply sm:rounded-br-lg;
}
Related
I looked for a way to align elements inside th to fix daterange picker look
I tried to add *display:flex", "display: inline-block", but those weren't working
I found a simple way using float property to be added to inner select elements:
Therefrom my final customized-daterangepicker.css looks like:
.daterangepicker table.table-condensed thead tr th.month select.monthselect {
float: left
}
.daterangepicker table.table-condensed thead tr th.month select.yearselect{
float: right;
}
I have a table inside of a table, a really simple one.
What I wanted to do is to avoid having border-bottom of td tag in the last row (tr) of the table. What I did is this:
tbody tr:last-of-type td { border-bottom: none; }
I was thinking that this is it, but then I checked the last row of not nested table and the whole nested table was not having a bottom border. Is there a way to avoid this using simple CSS without classes etc.?
To achieve no border bottom of the nested table, you can do so like so:
tbody table td {
border-bottom: none;
}
Note - the above rule makes assumptions about your CSS, which you haven't shared with us. Due to you not including the CSS that applies the border in the first place, it is possible the above won't work due to CSS specificity.
For example, if your rule that adds border to the table is:
tbody tr td {
border-bottom: [whatever style];
}
Then, the selector you need to use to remove the nested table border is:
tbody tr table td {
border-bottom: none;
}
Add your CSS, and we can more accurately answer your question. Or, better yet - read the CSS specificity article, and you'll know how to alter the selector yourself!
I'd say the simplest way is to use class and id. Like so:
table.outer { some: style; } /* class */
table#inner { some: style; } /* id */
But as you said, AVOID classes, then perhaps call the table nested within the table like so:
table { some: style; }
table table { some: style; } /* override outer table */
I'm not well versed in CSS, but I understand the basic idea of specificity (or so I think). Recently I was trying to override the table CSS of Bootstrap 3, which was defined for each cell like so (this is a partial bit, the part that was effective on the inspected element):
.table > tbody > tr.danger > td, .table > tfoot > tr.danger > td {
background-color: #ddd;
}
I was trying to override the background color of the entire row that contained that cell, with this:
table#results > tbody > tr.highlighted {
background-color: #ffd15b;
}
Which, as I understand it, has higher specificity due to the ID. However it wasn't working at all, until I introduced the child td in my CSS:
table#results > tbody > tr.highlighted > td {
background-color: #ffd15b;
}
Why didn't my first attempt work? I tried in both Safari and Chrome (latest versions)
Your problem is not CSS specificity, but merely the background of the cell ( <td> ) hiding the background of the row (<tr>) behind it.
Try adding border-collapse property to the parent table like below
table#results { border-collapse: collapse;}
I've been using the following jquery code to style table rows.
$('tr').hover(function() {
$('tr td').css('color', '#ffffff');
$('tr td a').css('background', '#0080ff');
});
$('tr').mouseleave(function() {
$('tr td').css('color', '#222222');
$('tr td a').css('background', '#ffffff');
});
This works just fine but I'm wondering there's a CSS alternative. It would seem like a much more efficient approach than what I have right now but I really don't know a whole lot about CSS.
The problem with using the following CSS
tr:hover {
color:#ffffff;
}
is that the anchor tags still remain the same color when the table row is hovered on. Are there any ways via CSS that hovering on a table row could trigger the anchor tags nested inside of the given table row to change colors?
It sort of depends on your other CSS selectors, but this will probably work:
tr:hover td {
color: white;
}
tr:hover td a {
background: #0080ff;
}
td:hover a {
your link style on row hover
}
I have a table structure, where I can't access jsp file to add class files. I have to manage it through CSS. In this case, I need to apply background color for first table all th's. Not to nested table th's. How can we do this with CSS? Example : http://jsfiddle.net/qdDnJ/
As per i understand may you can write like this:
tr th{
background:red;
}
tr table th{
background:none;
}
Check this http://jsfiddle.net/qdDnJ/2/
Distinguish first table's th from the second table's th.
Edited after comment:
See here, http://jsfiddle.net/qdDnJ/25/
I have assumed that div is parent container of first table.
You can replace it with table's parent.
e.g. If body is parent, css should be,
body > table > tbody > tr > th {
background-color:red;
}
You could do this:
table th:first-child {
background: red;
}
table table th:first-child {
background: none;
}
I would just give the outer table a class and use this:
table.class-name th:first-child {
background: red;
}
Every body tried many things to achieve the target as per the question.
but as per the HTML we can just write the following css and avoid child th to get background-color..
in this solution we do not need any id and class or any thing accept the .gap class. Even if this class is not there we can apply the css.
check the demo
HERE is the CSS with .gap class
table th {background-color:red;}
table td.gap tr th {background:none;}
HERE is the CSS without .gap class
table th {background-color:red;}
table td tr th {background:none;}
The simplest way I know is to use the child selector
#yourtableId > tbody > tr > th { background: red; }
Demo