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;
}
Related
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;
}
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'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
I would like to add a CSS class name "currency" to the header (th) of my table's column and have all the children data cells (td) in the column align to the right.
My best attempt is :
table th.currency td {
text-align: right;
}
However this obviously does NOT work. I tried to make it direct descendants ">" but that didn't work either.
I'd like to avoid adding the individual "currency" class name to ALL the td cells. Anybody got a solution?
If you know the column number you can use css selector of nth child on all trs in table.
table tr td:nth-child(n /*this is the column number*/)
{
text-align: right;
}
Here is a jsfiddle
Edit: You could also give the tables unique ids and target them that way:
#table1 tr td:nth-child(3 /*this is the column number*/)
{
text-align: right;
}
#table2 tr td:nth-child(2 /*this is the column number*/)
{
text-align: right;
}
#table3 tr td:nth-child(5 /*this is the column number*/)
{
text-align: right;
}
Using jQuery:
$.each($('th.currency'),function(idx,val) {
var table = $(this).parent().parent();
var colNumber = $(this).parent("tr").children().index($(this));
var rows = table.children("tr");
rows.find("td:nth-child(" + (colNumber + 1) + ")").addClass("currency");
});
Working jsFiddle: http://jsfiddle.net/8XSLF/
If the currency class doesn't right align, you can use the css function instead:
rows.find("td:nth-child(" + (colNumber + 1) + ")").css("text-align","right");
This can be put in a script shared among many pages, but can't be done with just CSS alone.
add comma (,) between table, th, and td ( yours not apply to th and td