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.
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 2 years ago.
Improve this question
I'm trying to remove the blue border from the button which appears every time the button is clicked. No matter what I try it doesn't go. Please see image below for details:
Any info on why this issue occurs?
Add outline: none; to the button.
The solution is pure CSS:
outline: unset;
You might need to add it with the :focus selector and/or :active.
The outline is used by default in a lot of browsers (especially for mobile UX)
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 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 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 have a table with several cell, when i selected a cell i put a color.
In this exemple i want to put 104.00€ over it the color
My question is if it's possible to superimpose my color below my text..?
Is there some way to do this?
my css:
.matrices .selected td{
border-bottom: 3px solid #E05206;
background-color: #c1f928;
}
I will do my best to answer this. I apologize if I interpreted your question incorrectly.
I am assuming you wish to place text on top of a colored cell. I assume you are asking how you can color that cell? You can do this one of 2 ways:
Within your HTML (though inline settings are not recommended):
<td class="selected" bgcolor="#FF0000">January</td>
Or within your CSS
.selected {background-color: #ff0000}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am working on my website and have drawn up how I wish to display my pricing info. putting it all into the table is easy enough, and i have found most of the initial questions. i have a border on the left, right and bottom of each tag, which line up with the top 3 nicely and similar to my drawing. the only question I have is to remove the cellspacing from only the top or bottom of each row. i tried using the collapse cell code which works great, except, then it eliminates the border-radius i wish to have. Ideas?
PICTURE
https://www.dropbox.com/sc/j2k1wh8ar5girwl/fcp52qP03n
CODE
https://www.dropbox.com/s/h3605tq9dhq5475/test.txt
USE THIS:
table, td, th {
border-collapse: collapse;
}
Sample AFTER: http://jsfiddle.net/theStudent/N2w3N/
Sample BEFORE: http://jsfiddle.net/theStudent/FJ69C/
Hows this one: http://jsfiddle.net/theStudent/N2w3N/1/