I want give border via inbuild CSS in XML for a blog. See the sample: iPhone 12 mini. I have add the following code:
.table{
border: 1px solid black;
}
But, it does not give a border. Any ideas?
Check if you have assigned the right class to the element you want to style. On the sample page there are no elements with the .table class.
If you can only access CSS and you want to style elements on the page over which you don't have direct control, you can try to select elements by their name, their classes, IDs and other attributes using CSS selectors. You can use both single selectors and combination of them to obtain the specificity you need. There is also !important CSS property which you can better not use to avoid maintenance difficulties of the code.
In your sample there are 2 things that can cause your problem:
there is a RESET CSS that include table with border: 0;
and
in your css code you tried, you used .table - this means that your table has a class="table", and from what I saw in the sample, that is not the case.
My sugestion is either to add the class="table" to your table and try again your css...
Something like so:
.table{
border: 1px solid black;
}
<body>
<table class="table" border="1">
...
</table>
</body>
Or remove the dot (and the need to include a class) - and use in your css simply :
table {
border: 1px solid black;
}
Mind you that this code, as per your sample css, only put a border around the table and not on all inner elements of said table.
Adding a border to the table doesn't have anything to do with CSS.
You need to add an HTML Attribute Instead.
<HTML>
...
<body>
<table border="1">
...
</table>
</body>
...
<HTML>
CSS Borders are for decorations, bordering an image etc...
While <table> doesn't use CSS Tables to make it visible, It can be added for decoration later, But it still requires the Border HTML Attribute.
Related
I'm not sure why this isn't working but I'm trying to make a transition bar on a page that is basically just a block of color across some content.
I'm using Bootstrap 3 but not sure that has anything to do with it. If I apply the color directly to my div tag using a style tag it will work. However, I would like it to be in my style sheet so I can add a left and right border. When I put the same thing in my style sheet and try to apply it the style it won't display. I'm still learning to use the Dev Tools but when I view it using F12 I looks as though it applies my stylesheet style like it should.
Any ideas on what I'm doing wrong?
This works. I'm using a period to control the height for now but will eventually try to apply some height styling.
<div class="row">
<div class="col-md-12" style="background-color:#6f88a1">.</div>
</div>
This doesn't
.home_transition_bar
{
border-left: 1px solid Black;
border-right: 1px solid Black;
background-color: #6f88a1;
}
<div class="row">
<div class="col-md-12 home_transition_bar">.</div>
</div>
well, bootstrap has some pre-defined styles... in order to overwrite them, simple css code might not be accepted. Therefore, try at the end of the style "!important". For example:
#header
{
background-color: red !important;
}
I am working with bootstrap and that has done it for me. Hope it helps
I am trying to put a border around a div.
<div style="border-color: yellow; border-style: dotted; border: 5px;">
<p>
This is a test.
</p>
</div>
Yet when I run this, this is what the browser shows as the actual style being applied:
<div style="border: 5px currentColor;">...</div>
The result is that no border is shown at all.
This makes no sense to me why the border styles are being overridden. I can only imagine that Bootstrap has set an !important override somewhere, but I have been unable to trace this.
Change the order in which you are applying inline styling. You can add all the 3 styling in the border style itself like border:5px dotted yellow;. Well if you still want to go with the way you did, just change the order. First add the border style and then specify the other styles like this.
<div style="border: 5px; border-color: yellow; border-style: dotted;">
<p>
This is a test.
</p>
</div>
In Chrome Inpsector:
click the element you wish to inspect
On the right, select the Computed tab
There you can see the applied styles, and their sources, so it would give you an idea why it is overridden.
you can always use !important yourself as well.
I am trying to figure out how to make this work. Shouldn't the background:red of the outer table's td overwrite all other ones? And why does this example end up with a yellow background although that's the element nested furthest down in the DOM?
<style type="text/css">
table, td, div {
height: 200px;
width: 400px;
}
</style>
<table class="outer" cellpadding="0" cellspacing="0">
<tr>
<td style="background: red">
<div style="overflow:auto;background:green">
<table class="inner" style="width:800px">
<tr>
<td style="background:yellow"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Here's a JSFiddle for this.
To wrap up... I am trying to overwrite the inner table cells' background color with a background in the parent div as well as the parent td of the outer table. Is that possible at all?
the background in the Td has the last say. so you technically can't do it with css alone. even if you put an !important in the div style it won't work.
anyways, you can probably fix that via js and replace the color of the td with another one.
bcz its css default behavior if u give style to parent tag than it automatically inherits by child html
if u want other css in child tag than u have to give style to that particular tag
which override ur parent style
The second td is always drawn above, and therefore over the top of, the background of the first td. As you are using the style attribute, which always takes precedence over any CSS applied in a style block or external CSS file, you will not be able to change this behaviour without resorting to JavaScript or moving the styles from the style attribute to a style block.
Using jQuery, you could achieve this with something similar to the following:
$('.inner td').css({
'background' : 'colour or image here'
});
As it turns out I don't know CSS.
I ran into a brick wall after using Eric Meyer's CSS reset (http://meyerweb.com/eric/tools/css/reset/)
I have a table with this style
table.home_right_top, .home_right_top table, .home_right_top
{
background-color: #F2F2F2;
width: 100%;
padding: 10px 20px 15px 20px;
}
but the padding is not applied to the table at all and I cannot figure out why. I am happy that I see the same behavior on all the browsers including IE7 and IE8 but I don't see any padding. Can someone please tell me what I am doing wrong here?
Thanks.
EDIT
This is my table
<table class="home_right_top" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="blueHeading14 heading_padding_right" style="width: 64px">Products</td>
<td class="rpt_stroke" style="width: 280px"> </td>
</tr>
</tbody>
</table>
The problem isn't the reset, it's that the W3 CSS property spec states that padding can be applied to:
all elements except table-row-group,
table-header-group,
table-footer-group, table-row,
table-column-group and table-column
So it's invalid to apply padding to a <table>. Instead, the only solution that comes to mind is to apply margin instead, wrap the table in a <div>, or apply the padding to the individual <td>s with special classes.
Take a look at the last line in his css:
table {
border-collapse: collapse;
border-spacing: 0;
}
Try removing that and seeing what happens, table cells don't often act like block level elements. I think the real problem here is that you shouldn't style the table element like this, becasue it's display property by default is table which is not the same as the box model.
Try putting padding on the cells themselves or add a margin to the table.
Works fine for me. Did you declare a DocType?
You have to apply the style to the TD's not the table.
table.home_right_top td
In my css file, I have a reset where I am setting the border:0. This causes all tables in IE, not firefox to have no border. Even if I set the border inline on the table, it still does not show in IE. Does anyone know the solution to this?
Part of the rest:
table, img
{
border:0;
}
<table border="1">
<tr>
<td></td>
</tr>
</table>
Border shows up in firefox, but not in IE. Do I have to do style="border:1px solid black" in the table instead of border="1"
If you want that specific table to have a border, I would just give it a class:
table, img
{
border:0;
}
table.something
{
border: solid 1px #000000;
}
<table class="something">
<tr>
<td></td>
</tr>
</table>
That should work in all browsers.
If you want a border you shouldn't set the border to 0. Try this instead:
table{
border: 2px;
}
That should work out better.
EDIT:
If you want to do it inline, you should do
<table border="2px">
Assuming that there's no typo in your code (in the question), have you tried adding a measurement unit to the inline setting?
<table border="1px">
For example?
Elsewise, try using CSS to re-/activate the borders:
<table style="border: 1px solid #000;"> <!-- or use a stylesheet, or style block, obviously -->
Have you checked that you're using a standards-compliant doctype declaration, and not lapsing into quirks-mode?
A couple standards-compliant ways to specify no border in css are:
border-width:0;
border-style:none;
Table elements, td elements and th elements all accept borders so a safe way to ensure no borders at all would be table, td, th {border-style:none;}.
table {border-collapse:collapse;} is a purely css way of removing spacing between cells
Check out w3schools.com or w3.org for standards-compliant css tips
Your example table has nothing in it. IE decides it has no content and so does not show the "border="1" attribute.
Reset with
table {
border:none;
}
Then use:
<table style="border:solid 1px #000;>
<tr><td>x</td></tr>
</table>
have you tried
table {border-collapse: collapse;}
EDIT: wait, you're trying to get rid of the border or add it? Now I'm confused...