I'm using Bootstrap 3.3
I have a HTML code as follows:
<div data-name="md-PersianDateTimePicker">
<table class="table table-striped">
<tr>
<td data-name="day">03</td>
<td data-name="day">04</td>
<td data-name="day">05</td>
<td data-name="day">06</td>
<td data-name="day">07</td>
<td data-name="day">09</td>
<td data-name="day" class="text-danger">09</td>
</tr>
.
.
.
</table>
</div>
How can I set padding:2px to each td?
I tested the following, it doesn't work!
[data-name="md-PersianDateTimePicker"] td{
padding: 2px;
}
Simply increase the specificity of your selector. If what you have currently doesn't work, try adding the table into it as well:
[data-name="md-PersianDateTimePicker"] table.table.table-striped td[data-name="day"] {
padding: 2px;
}
add !important specifier
[data-name="md-PersianDateTimePicker"] td{
padding: 2px !important;
}
DEMO FIDDLE
NOTE :
Never use !important on site-wide css. Only use !important on
page-specific css that overrides site-wide or foreign css
Related
In a table, upon hovering on one td cell, I want to highlight multiple td cells in the same row.
What I have currently is to use classes on each td like this:
<tr>
<td>v1_a</td>
<td class='c1'>v1_b1</td>
<td class='c1'>v1_b2</td>
<td class='c2'>v1_c1</td>
<td class='c2'>v1_c2</td>
</tr>
and have CSS like this:
tbody td.c1:hover,
tbody td.c1:hover ~ .c1,
tbody td.c2:hover,
tbody td.c2:hover ~ .c2 {
background-color: #CCffff;
}
then I can partially achieve what I want: JSFiddle
However, it is not exactly what I want. It highlights both col_b1 and col_b2 when I hover on col_b1, but not when I hover on col_b2. I want to highlight both of these columns whenever the pointer is on one of the cells.
Is there a simple solution ideally using only CSS?
Please use javascript to achieve.
I added an attribute as same-group elements identification to make it more sustainable.
$('.highlight').on('mouseover', function() {
$('.highlight').removeClass('hover');
$('.highlight[data-cell="'+$(this).data('cell')+'"]').addClass('hover');
});
td {
border: 1px solid;
}
.hover {
background-color: #ff0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>v1_a</td>
<td class="highlight" data-cell="c1">c1</td>
<td class="highlight" data-cell="c1">c1</td>
<td class="highlight" data-cell="c2">c2</td>
<td class="highlight" data-cell="c2">c2</td>
</tr>
<tr>
<td>v1_a</td>
<td class="highlight" data-cell="c3">c3</td>
<td class="highlight" data-cell="c3">c3</td>
<td class="highlight" data-cell="c4">c4</td>
<td class="highlight" data-cell="c4">c4</td>
</tr>
</table>
If you want to highlight full row, when hovering over any of the cell. Then write
tr:hover {background-color: #f5f5f5;}
in css file.
If you are not using css file and writing all the styling in html file theln write in head
<style>
tr:hover {background-color: #f5f5f5;}
</style>
I hope this will be helpful for you.
I want my whole table to have "center" text-align, besides some specific cells to have "right" text-align. In my code, the one cell is being more specifically targeted by CSS, yet the more general assignment is overriding. Why is this and how do I fix it?
.data td {
text-align: center;
}
.animal {
text-align: right;
}
<table class="data">
<tr>
<th>Type of Animal</th>
<th>Favorite Food</th>
</tr>
<tr>
<td class="animal">Cat</td>
<td>Mouse</td>
</tr>
</table>
CSS selectors are interpreted from least to most specific, so increase the specificity of your CSS selector to get it working.
I would recommend against using !important, because it will make that CSS more difficult to add to / override in the future.
There is also a helpful MDN article on CSS specificity, which may help you understand why your CSS isn't overriding other rules as you would expect.
.data td {
text-align: center;
}
.data td.animal {
text-align: right;
}
<table class="data">
<tr>
<th>Type of Animal</th>
<th>Favorite Food</th>
</tr>
<tr>
<td class="animal">Cat</td>
<td>Mouse</td>
</tr>
</table>
The .data td will be overriding .animal as it has more control Make similar
.data td {
text-align: center;
}
.data .animal {
text-align: right ;
}
<table class="data">
<tr>
<th>Type of Animal</th>
<th>Favorite Food</th>
</tr>
<tr>
<td class="animal">Cat</td>
<td>Mouse</td>
</tr>
</table>
http://codepen.io/louisverdiguel/pen/vCJFh
this is my first time here i hope i am doing it right.
html
I have created a string of rows and columns with html for a client to "resemble" a spreadsheet.
CSS
I have created a css class class="sale td"
within the class .
.sale td {border: 1px solid grey; }
to have a border show for each row
issue: i would like to remove the border from any <tr> that contains a <h2> tag
how would i go about creating such a specific class or action with the CSS and what is this method called?
You can try like this: LINK
CSS:
.sale tr.no_border td {
border: 0px !important;
}
HTML:
<tr class="no_border">
<td colspan="3" align="left" valign="top"><h2>Bottles</h2></td>
</tr>
You can only try to add style tag to each row, for which you want to remove the border.
For example:
<td colspan="4" align="left" valign="top" style="border:none;">
You can't go backwards like that setting styles for a tag based on tags inside it. You have to mark the tr/td with a class if it contains a h2 in order to do this.
Edit:
An example.
CSS
.noborder {border:none !important}
"!important" ensures it overrides the other CSS style.
HTML
<td class="noborder">
Edit2:
Also ".sale td" in your CSS means any <td> inside a block (table in this case) with a class of "sale". So you don't set a class of "sale td" on your <table> - but just "sale"
For every row you can use this css:
.sale td {border: 1px solid grey; }
but for the rows with <h2> in it:
.sale tr.no-border td {
border: 0px !important;
}
and your html will look like:
<tr class="no-border">
<td colspan="3" align="left" valign="top"><h2>Heading</h2></td>
</tr>
Table with only one border line, in this case i have two borders...
<table width="100%" border="1">
<tr>
<td width="12%"> </td>
<td width="88%"> </td>
</tr>
</table>
Thanks
Add the border-collapse CSS rule:
table {
border-collapse:collapse;
}
jsFiddle example
CSS:
table {border-collapse:collapse;}
You should really use css for styling where possible. A great article about it is here http://www.w3schools.com/css/css_table.asp
Try adding this to you css
table
{
border-collapse:collapse;
}
An example is here http://jsfiddle.net/cxmBW/1
The DITA Open Toolkit automatically inflicts some inline table attributes when one publishes to HTML, including frame="border" and rules="all".
I need to override this "rules" attribute using CSS styles for cells, and while I can get the desired result in IE and Chrome, Firefox puts solid black gridlines in the table and refuses to budge on the matter.
Obviously I can't edit the HTML, company policy is to not edit the XSLT, so how can I remove these gridlines using CSS alone?
I've tried various cunning combinations of border-xxxxxx styles and given them !important declarations to no effect.
The HTML says...
<table cellpadding="4" cellspacing="0" frame="border" border="1" rules="all">
<thead>
<tr>
<th class="cellrowborder">Type </th>
<th class="cellrowborder">Comment </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder">Caution </td>
<td class="cellrowborder">Think twice. </td>
</tr>
<tr>
<td class="cellrowborder">Attention </td>
<td class="cellrowborder">Be careful. </td>
</tr>
<tr>
<td class="cellrowborder">Danger </td>
<td class="cellrowborder" >Be scared. Be very scared. </td>
</tr>
</tbody>
</table>
The CSS says
table {border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
font-size: 9pt;
margin-top: 1em;
margin-bottom: 1em;
padding: 4px;}
tr {border: none;}
.cellrowborder {border: none;}
So while it looks as I'd expect in IE, it doesn't in Firefox UNLESS I remove those frame/border/rules attributes in the HTML. Which I can't in production.
Use jQuery's remove attribute on document load to remove the old attributes all together.
api.jquery.com/removeAttr
I've had a quick play with <table frame="border" rules="all">. The key seems to be to override it with another border, for example:
table {
border: none;
border-collapse: collapse;
}
td {
border: 1px solid silver;
}
It's not ideal if you need to remove the border altogether, but I guess you could match the border-color to the page background?
border-color seems to apply.
Maybe using FireBug Inspect Element can help you detect the CSS property and allow you to target it in Firefox (instructions here).
Can you post an example of the code?