I use following css in my table:
.lh1 {
line-height: 50px;
}
And my table looks like this:
<table class="table table-bordered lh lh1">
..
..
..
</table>
But no matter which value I use for line-height, my table doesn't change at all. Other .css in this table is working fine.
What could be the cause of that problem?
You need to do it like this.
CSS
.lh1 > tbody > tr > td {
line-height: 50px;
}
your CSS is not overwriting the bootstrap CSS. Here is the demo
try with:
.lh1 {
line-height: 50px !important;
}
Your bootstrap may override this
Related
I need to overwrite some CSS in a Drupal back office (I can't change the CSS) and I tried to follow the instructions of this stackoverflow question.
So I made the following code :
EDIT
<style type="text/css">.maclasse div {
background: #ffffff;
overflow:auto;
width:auto;
}
.maclasse2 tbody tr td {
text-align: left;
}
</style>
And then, in the HTML I used my side classes :
<div class="maclasse maclasse2">
<table class="maclasse2">
<tbody>
<tr>
<td>
<pre style="margin: 0; line-height: 125%">
....
But it is not working ; the inspection of the page shows that :
In td, the text-align is still centered and we can see the override is denied. What do I need to add to my code ?
if just text in html like this code
<td class= "montd">
...
<span>text</span>
...
</td>
in css selected like this
.montd span {
text-align: left;
}
On .GMDataRow td:hover I want to change background-color for each td in that tr element. Is this possible only with CSS? I'm trying to do it with CSS only, I don't need JQuery, JS solutions.
<tr class="GMDataRow">
<td></td>
<td</td>
...
</tr>
try this way
tr.GMDataRow:hover td{background:#ccc;}
Solution suggested by Lalji is perfect.
tr.GMDataRow:hover td{
background-color:red;
}
tr.GMDataRow finds the class "GMDataRow" in table rows.
tr.GMDataRow:hover will activate hover css for current targeted row.
tr.GMDataRow:hover td will target all column which are child of active row.
If you want to change td background on hover differently ... try this
HTML
<table style="width:100%">
<tr class="GMDataRow">
<td>ceva</td>
<td>ceva</td>
<td>ceva</td>
<td>ceva</td>
</tr>
</table>
CSS
.GMDataRow td:first-child:hover {
background: yellow;
}
.GMDataRow td:nth-child(2):hover {
background: pink;
}
.GMDataRow td:nth-child(3):hover {
background: red;
}
.GMDataRow td:last-child:hover {
background: blue;
}
also take a look here http://www.w3schools.com/css/css_pseudo_classes.asp , or here http://www.w3schools.com/cssref/sel_firstchild.asp maybe it will help you to understand better.
With only Bootstrap css the table width works fine, but with my css styles the td width displays very bad.
<table>
<tbody>
{#items}
<tr onclick="selectPickPoint(this);">
<td width="50" align="center"><input name="pickpointid" type="radio" value="{customer_id}"></td>
<td width="300">
<b>{name}</b> <i style="font-size:9px;">#{customer_id}</i>
<br>
{address} <br> {postal_code} (ver en el mapa)</td>
</tr>
{/items}
</tbody>
</table>
You can check here the rendered example (see chose store table):
https://jsfiddle.net/5ghpqx8L/3/
You seem to have the following css in your fiddle:
.puntosdeventa input, .puntosdeventa select {
width: 235px;
}
This is causing your problem. If you can replace this css with the following line it will work just fine:
.puntosdeventa input, .puntosdeventa select {
width: auto;
}
I would recommend using a different css declaration for the inputs and selects. Most probably you want to have a wider select element than the input.
You can also change these lines to fix it:
Old:
.puntosdeventa input, .puntosdeventa select {
width: 235px;
}
New:
.puntosdeventa input[type='text'], .puntosdeventa select {
width:235px;
}
https://jsfiddle.net/5ghpqx8L/5/
You've set the width of the all inputs (including radio buttons) to be 235px, which is forcing the first column to expand.
Try adding a new style rule, something like:
.puntosdeventa input[type='radio'] { width:auto; }
I have a table in html, containing this structured data:
<table>
<tr><td>label1</td><td>value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr>
...
</table>
This is a long list. I would like to be able to but each n+1-th row next to the n th row, like this:
<table>
<tr><td>label1</td><td>value1</td></tr><tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr><tr><td>label4</td><td>value4</td></tr>
...
</table>
So the structure stays the same, but the CSS layout would take care of putting each second row on the right, so the users sees 2 columns of (field, value) in one row.
Any hints?
UPDATE:
This trick will do it, but destroys the table-layout, so not usable.
TABLE TR
{
float:left;
}
TABLE TR:nth-child(2n+1)
{
float:left;
clear:both;
}
Try out and let know is that you want?
Your Html
<table>
<tr><td>label1</td><td>value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr>
<tr><td>label4</td><td>value4</td></tr>
<!-- more stuff here -->
</table>
CSS:
tr {
float: left;
}
tr:nth-child(2n+1) {
clear: left;
padding-right: 10px; /* You can edit this line and add as per your style */
}
Works fine in Chrome, Safari, Firefox. Not checked in IE
Example
All,
I have an ASP.NET GridView that is rendered to an HTML table.
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 3</td><td>Data 4</td></tr>
</table>
I want to highlight the row when the mouse is hovered over it - except for the first row which is the header.
I am just getting my head wet with JQuery, and have dabbled a bit with CSS (either CSS2 or CSS3). Is there a preferred way to do this?
Can anyone give me a starting point for this?
Cheers
Andez
There is a way to achieve the desired behavior without class-ing each row separately. Here's how to highlight each table row except for first one (header) on hover using the CSS :not and :first-child selectors:
tr:not(:first-child):hover {
background-color: red;
}
Unfortunately, IE < 9 does not support :not, so to do this in a cross-browser way, you can use something like this:
tr:hover {
background-color: red;
}
tr:first-child:hover {
background-color: white;
}
Basically, the first CSS rule includes all rows. To avoid highlighting the first row, you override the its hover style by selecting with tr:first-child and then keeping its background-color to white (or whatever the non-highlighted row's color is).
I hope that helped, too!
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
Why not simply use
tr>td:hover {
/* hover effect */
background-color: lightblue;
}
This will only affect table rows with td's inside, not table rows with th's inside.
Works in all browsers. Cheers, guys.
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
If your table is standard, you have a table like this:
<table>
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<th>cell</th>
</tr>
</tbody>
</table>
so you can use this css code:
table > *:not(thead) tr:hover{
background-color: #f5f5f5;
}