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
Related
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 4 years ago.
Improve this question
Removing the borders for the table and color to be added to the alternate row.
Here is my code:
https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.ts.
I'll be honest and say that it's not quite clear what you're asking for, possibly due to a language barrier, but I have interpreted that you would like to:
remove the border from the rows
provide a different background colour for alternating rows
On that basis, the following CSS rules should help:
mat-row:nth-child(odd) {
background: #eee;
}
mat-row.mat-row.ng-star-inserted {
border: 0;
}
Changing the background colour as required (as there's a clash with the yellow text). A bit more specificity is needed when removing the border, as this is set in an inherited stylesheet (possibly from the theme you're using), so I've gone for more detail in the reference, rather than the lazy !important suffix.
This results in the following:
if you want to remove the shadowed border from the table, add the following:
.example-container.mat-elevation-z8 {
box-shadow: none;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have an app which has sections, and I need a 1px line between them. It seems I have a choice:
An hr element.
A div with a 1px border.
A div which is one pixel high, and has a background color.
See example
.hr1{
border-bottom: 1px solid;
}
.hr2{
height:1px;
background-color:black;
}
Is there any benefit to one particular way?
It seems to me the hr element is not a good idea, as the styling could get changed too easily.
Yes, there is one overwhelming advantage to using the proper hr element: it is understood by text-based browsers and screen readers.
To someone who doesn't use a normal browser, an empty div will not show at all, whether or not there is a border. An hr always will. It's probably desirable for it to do so.
More information is available on this accessibility site, which also notes a suggestion for times when you need to use something other than an hr:
<div class="rule"></div><hr>
div.rule {
height: 1px;
background: blue;
}
hr {
display: none;
}
To add to #lonesomeday's answer: The correct use of the HR element is important to screenreaders, and text-based browsers. This example is given from the spec:
Some examples of thematic breaks that can be marked up using the hr element include a scene change in a story, or a transition to another topic within a section of a reference book.
The use case in the question is presentational, not thematic. So it would not add a benefit to a text-based browser, or screen reader. So an hr element should not be used in this case.
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.
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 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 8 years ago.
Improve this question
I've made this fiddle to demonstrate: http://jsfiddle.net/Trblestrife/9HCCU/1/
Basically I'm applying a black background
#000 to the ID #footer-sec (line 182), however the black background is being applied to the ID #footer-prim.
Confusing!
If someone could give me a hand working out what's happening, if there's something wrong with my semantics or something that'd be great. I'm pretty new to this.
Thanks A
Edit
My styling begins in the CSS column at line 150. Sorry to make it so bulky, but I need a quick fix as this is a pretty simple problem so I just copy & pasted my whole reset sheet rather than adding only relevant styles. Sorry again!
Because you are floating the ul inside #footer-prim and #footer-sec those elements float outside their parent (resp #footer-prim and #footer-sec).
The solution is to let the parent know that there are elements inside it that float, by using the following code:
#footer-prim, #footer-sec {
overflow: auto;
}
Also check the updated Fiddle.
Set float:left. Try this:
#footer-sec {
background-color: #000;
color: #999;
float:left;
}
Demo
You could do it like this:
Adding: display: inline-block;
CSS:
#footer-sec {
background-color: #000;
color: #999;
display: inline-block;
}
DEMO HERE