This question already has answers here:
How do I prevent CSS inheritance?
(13 answers)
Closed 6 years ago.
Width in in parent table is automatically inherited to child table.
HTML
<table class="datagrid">
<tr><td>sdfdsfds</td></tr>
<tr><td>
<table class="gridpager">
<tr><td>1</td></tr><tr><td>1</td></tr>
</table>
</td></tr>
</table>
CSS
.datagrid table {
width: 100%;
}
.gridpager table {
float: right;
}
If i add width:auto in gridpager class it will works.but need to override all style of parent in child class.Is there any other solution other than this?
Make the css changes like following
table.datagrid {
width: 100%;
}
table.gridpager {
float: right;
}
Related
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
nth-of-type vs nth-child
(7 answers)
CSS - How to select nth-child of form element?
(3 answers)
Closed 2 years ago.
I have a html form with the following text input fields. No class, no id, same type.
I need to style them in a different way.
Is it possible to target them by order using pure CSS?
Something like:
CSS (not working)
input[0] {
height: 100px;
}
input[1] {
height: 150px;
}
input[2] {
height: 200px;
}
<input name="arr[]" type="text">
<input name="arr[]" type="text">
<input name="arr[]" type="text">
I know that I could use :nth-child or :nth-of-type, but I wonder if there's another way to target those elements, like in my CSS example.
Thanks.
Try :nth-child, like this:
input:nth-child(1) {
height: 100px;
}
input:nth-child(2) {
height: 150px;
}
input:nth-child(3) {
height: 200px;
}
This question already has answers here:
How to make <div> fill <td> height
(6 answers)
Closed 2 years ago.
Hi i have problem to make empty button in bootstrap table to 100% height. This is my case: jsfidle
I used this but empty button is not set on 100%
td{
padding:0;
}
td button, td div{
width:100%;
height:100%;
}
table th, table td {
padding: 0!important;
}
Another option is to just put a (non-breaking space) in the empty <Button> element:
<Button class="btn btn-success"> </Button>
Fiddle for the nbsp method
Or you can use this css method which uses the ::before selector and the content property with an escaped unicode character. In this case \00a0 which is equivalent to
td button.btn.btn-success::before {
content: '\00a0';
}
Fiddle for the css method
To fix your issue on the empty button you should use a CSS, instead of giving the height to 100%, you can simply place a value in pixels for that for example 25px seems to work the case.
td{
padding:0;
}
td button, td div{
width:100%;
height:25px;
}
table th, table td {
padding: 0!important;
}
Here is the result of your question:
https://jsfiddle.net/79jzkwup/
I have a module which is a table actually.
The table.component.html source code as follow:
<table border=1>
<theader></theader>
</table>
And the theader.component.html source code as follow:
<thead #theader>
<tr><td class="alignCenter underlineText">Table Header</td></tr>
</thead>
Furthermore, the content of style.css as follows:
.alignCenter
{
text-align: center;
}
.underlineText
{
text-decoration: underline;
}
table
{
border-spacing: 0;
border-collapse: collapse;
width:1660px;
}
I don't know why the text "Table Header" does not align center.
However, the underline decoration works.
Even the computed CSS show the text already aligned.
I attached a screen dump for your reference.
This is my app in stackblitz.
You are applying text-align: center on <thead>. This ensures that the content inside <thead> is aligned center.
But <thead> element is in <table> and is not aligned center. You have apply text-align: center on the <thead>'s parent element which is <table>.
Make following change to your CSS and it should work. But remember that this will also align center other children of <table>.
table
{
// Other properties.
text-align: center;
}
Live demo on StackBlitz: https://stackblitz.com/edit/angular-7ce5qe
You need reset your theader component styles.
#Component({
...
selector: 'theader',
styles: [`
:host {
width: 100%;
display: inherit;
}
`],
})
https://stackblitz.com/edit/angular-xo5vhq?file=src%2Fapp%2Ftable%2Ftheader%2Ftheader.component.ts
This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 3 years ago.
I am trying to have a div wrapping a span element in this way:
----------
|Sentence|
----------
-----------------
|It's a looooong|
|sentence |
-----------------
It works for short sentences but not for long because the end result is like:
----------------------
|It's a loooong |
|sentence |
----------------------
The code is like:
.div-with-border {
display: inline-block;
border: 1px solid red;
}
.div-with-border span {
display: block;
}
table{
width: 100px;
font-size: 16px;
}
<table>
<tr>
<th width="50%"></th>
</tr>
<tr>
<td>
<div class="div-with-border">
<span>Sentence</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="div-with-border">
<span>It's a loooooong sentence</span>
</div>
</td>
</tr>
</table>
I basically want to remove the blank gap that exists between the word break and the right limit of the div edge, as shown in the example above.
Please make span display:block; and text-align:justify, this will help check below :
.div-with-border {
display: inline-block;
border: 1px solid red;
max-width: 100px;
}
.div-with-border span{
text-align: justify;
display:block;
}
<div class="div-with-border">
<span>This is a long sentence</span>
</div>
This is a consequence of how browsers resize elements when text wraps. I don't think a pure CSS solution to this is possible.
One way you could accomplish this is to calculate the text width in Javascript, as it will not contain this word-wrap edge width. Then you can force the container <div>'s width to that:
$(".div-with-border").each(function() {
var textWidth = $(this).find("span").width();
$(this).width(textWidth);
});
I'm using jQuery to do this but you could also use vanilla JS. The width of the text (specifically, the longest line of text) is the .offsetWidth.
Here's a JSFiddle.
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed 4 years ago.
I have a class called .box-159 where the number changes every time the screen is refreshed. Is there a way to define this field (say background-color) in the CSS?
Yes it is possible just by using CSS only.
Option #1 - Match by prefix value
Use CSS Class selector ^="class" which select all elements whose class is prefixed by "box-"
[class^="box-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display:block
}
<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>
Option #2 - Match by contains at least one value
Use another CSS class selector *="class" (equivalent to CSS attribute selector) which select all elements whose class contains at least one substring "box-".
[class*="box-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display:block
}
<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>
You can add an additional class, like so, then both those elements will have the class' CSS attributes:
.box-class {
background-color: red;
width: 100px;
height: 100px;
margin-bottom: 20px;
}
<div class="box-class box-4"></div>
<div class="box-class box-159"></div>