Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm trying to indent some data in a table.
The class I'm using currently is:
.table tbody tr.table-indent{
padding-left:50px solid #bdbdbd;
}
It doesn't seem to be working with padding, margins, or a border. How can I do this correctly?
There are several problems here:
Your code has some syntaxt errors. It should be something like that:
.table tbody tr.table-indent{
padding-left:50px;
}
if you want a border on your row too:
.table tbody tr.table-indent{
padding-left:50px
border: 1px solid #bdbdbd;
}
You should really add padding on a table cell instead of a row:
.table tbody tr.table-indent td:first-child{
padding-left:50px
}
The :first-child selector will catch just the first cell of each row.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a table in which I want each of its td elements to have no space between each other. However, I still want borders between each td(so you can actually tell them apart). Unfortunately, when I try either or both of the following:
table {
border-collapse: collapse;
border-spacing: 0;
}
My borders disappear entirely. I tried giving the td elements outlines through css, but that didn't work either. I looked at several different threads about html table spacing, but none of them talk about retaining borders after removing the space.
The reason I need this feature is because I want a fluid hover effect between each td, and having that small gap ruins the effect.
Any help would be great.
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border: 1px solid black;
}
<table><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td><td>g</td><td>h</td></tr><tr><td>i</td><td>j</td><td>k</td><td>l</td></tr></table>
Just remove all padding from within the table elements, that should fix your issue. It would leave the borders on the table but remove all of the spacing
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to add border in the select element below using css, im new to web development it would be a great help if you can show me how, thankyou.
To add a 1 pixel solid black border to just the element shown in your screenshot, the following CSS should do the trick:
#menu-item-83 > .submenu {
border: 1px solid black;
}
The # prefix references an element by id. The > specifies that the following element should be a direct child of the preceding matched element. And the . prefix references an element by class name.
This works fine for me:
#menu-primary #menu-item-83 > ul.sub-menu {
border: 1px solid #000;
}
https://jsfiddle.net/ccd7tLxm/
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have a simple HTML table and I want to style one of the columns which I do with the following CSS.
.tableStyles tr td:first-child + td + td {
background-color:aquamarine
}
I would like to omit the first row from this so no styling is applied. I tried something like this but it doesnt work.
.tableStyles tr:not(first-child) td:first-child + td + td {
background-color:aquamarine
}
Can you help?
For skipping the 1st element of a given type and styling the 2nd, 3rd and 4th elements etc, using
:nth-of-type(n+2)
is an efficient solution.
Consequently, try:
.tableStyles tr:nth-of-type(n+2) td:nth-of-type(3) {
background-color:aquamarine
}
:nth-child(n+2) will select starting from the 2nd
.tableStyles tr:nth-child(n+2)
{
background-color:aquamarine
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
This post was edited and submitted for review 6 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
My question is about the borders in html tables. Even using css to style it, some borders are thicker than others.
For instance, the usual approach found online is the following...
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid;
}
But some of the border lines are thicker than others. Is there a way to avoid this effect?
In CSS
table td {border-collapse:collapse}
In HTML
<table border="1" cellpadding="0" cellspacing="0">
Try to run your code on different browsers. Sometimes it may happen as your browser fails to render the table correctly.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
With this CSS styles I expect a circle with dotted border:
div{
border: 1px dotted #000;
padding: 50px;
border-radius: 100px;
display: inline-block;
}
But Firefox is rendering solid borders (fiddle here). Any solution?
UPDATE
THIS IS NOT AN ISSUE ANY MORE.
RESOLVED in Firefox 50
If you're using Firefox, this is a known bug. Your options are:
If this is just for the sake of a circle, draw it with <canvas>, e.g. as demonstrated here
Use SVG (possibly inline), which supports various ways to stroke paths
Just make a PNG
Fix the bug, which Mozilla will surely appreciate ;)