I am using the following css to mimic a table:
.table {
width: 100%;
border: 1px solid #f00;
}
.table .th {
background-color: #f00;
color: #fff;
font-weight: bold;
border-bottom: 1px dotted #f00;
}
.table .td {
display: inline-block;
width: 23%;
padding-left: 2%;
}
Is there a way to have line that will separate each row?
Thanks, Evan
Please use tables rather than recreating tables. They have a purpose. If you are creating tubular data list, like a spreadsheet, then just use a table.
This is more of a pet peeve, but it's just a waste of code that quickly becomes unmanageable.
Not too sure what the structure of your markup is but if you mimic a table row (.tr) and wrap each row of tds in it then you will have more styling control through the css.
If not, just applying a border-bottom to the td class will also work.
#seth is right too, there no no problem using tables to show data.
Related
I want to have my b-table have rounded borders
I've tried multiple different solutions I found online but it still hasn't worked out for me
For reference, this is what I want my table to look like in terms of borders:-
And this is my current table:-
for my CSS I've used the following:-
.content-table {
border-collapse: separate;
margin: 25px 0;
font-size: 0.9em;
min-width: 400px;
overflow: hidden;
border: 2px solid #5B5B5B;
border-radius: 15px;
background-color: #5B5B5B;
border-spacing: 0;
}
However, as my current table image show, this means my rows do not have their top or bottom headers
I have also tried using border-collapse: collapsed without the border-spacing 0 but then I will get a result like this:-
However, this is also an issue whereby the border is extending over in all the corners
Any assistance would be greatly appreciated!
Adding rounded border to a table is little bit tricky,
table { position:relative;max-width:600px }
table::after {
content: " ";
inset: 0;
border: solid #000 1px;
position: absolute;
border-radius: 20px;
}
DEMO
Is there any automated way to get CSS property and value with its selectors from one giant CSS file? For example,
.selector1 {
border-radius: 3px;
color: #000;
text-align: center;
}
.selector2 {
background-color: #000;
padding: 10px 20px;
}
Now I want to extract CSS below from CSS above based on #000 color value.
.selector1 {
color: #000;
}
.selector2 {
background-color: #000;
}
Finding and editing manually in text editor works, but this approach is hard to accomplish after CSS is changed which is changed frequently. So I wonder if there is any automated way to do that.
I thinks this is not possible with css but you can achieve it using JavaScript.
I'd like to set a background and a rounded border on a <tbody/>, such as
tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }
However, when I try this in Codepen, the border and background color display, but the <tbody/> still has square corners.
I'm able to work around this problem using a series of :last-child and :first-child selectors to apply the radius to individual tds on the corners, as for example
tbody tr:first-child td:first-child { border-top-left-radius: 15px; }
This version does what I want (at least, under firefox) but also feels extremely verbose and hacky, a problem that'll only get worse when I add the prefixed versions for compatibility (-moz-, -webkit- etc), and support for <th/> elements in addition to <td/>. Is there a succinct, pure-css way of getting this behavior?
Assuming you have collapsed the borders in the table, simply set display:block on the tbody and apply the border-radius.
Codepen example
CSS
table {
width: 100%;
border-collapse: collapse;
display: block;
width: 600px;
}
tbody {
background: #ccf;
border: 1px solid black;
border-radius: 15px;
display: block;
}
th, td {
width: 200px;
}
td, th {
padding: 5px;
text-align: center;
}
I have CSS definitions for various elements around Table as shown below (Details omitted, only style names for reference).
table.entities {
border: 1px solid #c5d7ef;
border-collapse: collapse;
width: 100%;
margin-bottom: 0;
}
table.entities th, table.entities td {
padding: .25em 1.5em .5em .5em;
}
table.entities th {
font-weight: bold;
text-align: left;
background: #e5ecf9;
white-space: nowrap;
}
table.entities th a, table.entities th a:visited {
color: black;
text-decoration: none;
}
table.entities td {
background-color: #fff;
text-align: left;
vertical-align: top;
cursor: pointer;
}
table.entities tr.even td {
background-color: #f9f9f9;
}
And I apply the styles for even rows like:
flexTable.getRowFormatter().getElement(row).setClassName("even");
But for some reason, the header styles are not applied to table. Here is what I have tried
As it is I would expect th to apply style to first row, but not sure if that is a valid assumption to make
Changed the header style from th to something like theader and then explicitely applied to first row using row formatter for first row. I tried first row value as 1 & 0 both but either didn't give me results
Can anyone help me spotting where I might be going wrong?
I am pretty sure that the FlexTable does not render <th> tags. Everything is contained in the <tbody>.
You must also remember that the <tr> tag is pretty much unstylable so to style the whole row you need to apply the same style to all child <td> tags.
tr.someStyle td {
/* all styles that apply to the row */
}
If you post your actual styles and what is not being applied, maybe we can help further.
I want to style a form in html using CSS. It's a really simple form, so I didn't expect to have any problems with accessing it with CSS selectors. But anyway, when I am trying to add something like:
#maincontent #left_side #comments{
margin: 100px;
}
or
#comments{
margin: 100px;
}
I see no visible effect.
Sorry, I think I am not very descriptive, but not sure how to describe the problem...
Maybe you could take a look at the demo url here:
http://chess-advices.com:8000/article/ololo/
And suggest how to fix my CSS, to pretify the form? (Well I actually just need to access it first)
Thanks in advance
You forgot to close this:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
change this to:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
}
To find this: Line 267 in your style.css or you can use strg/cmd + f to find it...
But i think, if you add something like this:
form label { width: 100px; display: block; float: left; }
form p { padding: 5px 0px 0px 0px; }
your form would look nicer :)
I hope this is the answer of your question...
There is an error earlier in the css file that causes this. There is no closing bracket on the style div.pagination span.disabled style, that makes the browser skip the rest of the css file.
Note: as an id is unique in a page, you only need #comments to target the element. The only reason to use #maincontent #left_side #comments would be if you need to make it more specific to override some other style, or if you use the style sheet for several pages and there can be other elements with the id comments that you don't want to target.