I'm building a simple website for a friend of mine using wordpress. In a page I now want to make a simple rectangle and put some info in it. Since I learned html back in the 90's I still use a table (with one td) to do this. Since I want the table border to disappear I created the table like so:
<table border="0">
<tr><td>some content</td></tr>
</table>
Unfortunately, the border still appears (see here for the page I work on).
Does anybody know how I can get rid of this table border?
You are having this rule in your stylesheet style.css Line 1071 which needs to be removed
th, td, table {
border: 1px solid #DDDDDD;
}
Note: This is an element selector, will apply to all the tables in your website.
You've that table inside a div with class post-entry so better you can override the styles using the below selector
.post-entry * { /* '*' will select all element inside .post-entry so be cautious */
border: 0 !important;
}
And if you are having post-entry for other elements too, explicitly specify the elements instead of using *
.post-entry table, .post-entry th, .post-entry td {
border: 0;
}
Tip : Use firebug, will save you from asking less questions and wasting less time in debugging your CSS, HTML and JS
Related
I've been using 'border = 1' in my HTML, which looks fine, but I realise it would be better to use CSS, so I created a basic border class, like so...
.basicborder table, .basicborder th, .basicborder td {
border: 1px solid black;
}
The borders appear around the th and td's but not around the outside of the table itself. Have I done something wrong?
CSS looks fine to me, but you can better use:
table.basicborder, th.basicborder, td.basicborder{border: 1px solid black;}
So, the selector starts with the least specific selector (the HTML element, instead of the class).
But it should already work fine, if you have linked your HTML properly. Do your table, th and td elements have a class="basicborder" attribute each?
edit:
If i comprehend correctly, this would be the best solution.
You make a basic style for all 's with just table,td,th{ etc...
Then you add to the ones with a different style a class, lets stay differentborder.Now you make a CSS saying the following: table.differentborder, .differentborder td, .differentborder th{ your style }
This selects your tables with the class, and all td's an th's where a parent has the class differentborder.
For more fun with CSS selectors you can look on the W3Schools CSS Selector Reference
I have a big list of data inside HTML table that is fed from the database, which then printout to PDF. The table just ordinary table, with couple of columns, but the style I use has border left and right to show the vertical line on each table on every page, but not the horizontal like. I use CSS to draw the border, something like this:
td {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
The problem I got is when paginated (printed to PDF) on each page at the bottom of the table, it wasn't closed so it looks open. I want to close the border at the bottom of the table of each page.
I managed to draw the border of the last row using tfoot, this works great until I got to the very last page, apparently it also draw it there too. Don't want it to draw at the end because I've made a summary there already, so having the line there is just not good.
<thead>...some header...</thead>
<tfoot>
<tr><td class=myborder> </td></tr>
</tfoot>
<tbody>...list of data (100 rows of tr)...</tbody>
The CSS, I use red for hightlight on my table:
.myborder {
border-top: 1px solid red;
}
So my question is there any css that can draw the simple line at each page ending but not at the last page?
If using tfoot, I've tried looking for solution, it pretty much like the post below, but a bit different, I don't want tfoot to show on the last page, but any other page is fine.
How to make TFOOT to show only at the end of the table
Thanks in advance.
PS. Thanks Ben for the format fixes, this is my first post :)
I've updated your question and while formatting I noticed at least a misplaced <td> in your <tfoot>. Also you're opening with <foot>, which should be <tfoot>.
You may use something like this to apply for all tfoot except the last child.
tfoot:not(:last-child):after {
border-bottom: 1px solid red;
}
First answer, correct me if there is any mistake.
Here, I am facing another problem with CSS.
My HTML string is coming from database and adding to DOM with HTML Object.
new HTML(result.getResponseObject().getStringResult());
That string contains some HTML tables and have border="1", that has been overridden by default CSS (you can see that in Firebug), where as the border applied in HTML like border="1"
How to tell that the applied styles are in HTML, not from any CSS file (or did I miss something in my code)?
I tried with 1px solid !important; it's still not working.
If I understand your question correctly you could do something like this:
table[border] {
border: 1px solid black;
}
This will select any table that has a html border property eg:
<table border="1">
but will ignore those that don't
Here's a demo
Why are you using the border attributed to begin with? In HTML5, it's meant only to indicate that <table> is being used to draw an actual table, rather than just for layout. If you want to specify a table border, you should use something like 3rror404's solution (although I would explicitly use table[border="1"] as the selector to avoid problems if you also have tables with border="0" anywhere in the document.
I have several web pages containing tables, for which I'd like to have line-borders around the tables and the cells. In fact, some of these pages existed for several years already, and rendered acceptably in IE6, IE7.
We switched about 6 months ago to a completely different set of style sheets to change our site look and feel. We also switched to "modern" browsers such as IE8 (and because I couldn't stop Vista) to IE9.
Now the borders don't render at all.
I spent a day fighting with this about a month ago, and failed to fix it. It seemed that I could reduce the page down to just the barest table and IE8 would still not render the border. I think I decided IE8 was just buggy, but I'm not an HTML expert so it is more likely that I'm buggy.
(I'm just getting back to this; I'll go see if I can find that reduced page).
Here is one such page:
http://www.semdesigns.com/products/DMS/DMSComparison.html
The tables should be obvious; you can tell them by their absence of lines :-{
The URI validates using the W3C service as HTML 4.01 Transitional.
Any suggestions?
EDIT: Posters all pointed out that the new style sheets set the default borders to 0. Oops!
From what I can see you have border:0; in the styling of the tables.
This will hide the borders on tables.
Your new stylesheets appear to use reset values, i.e. it sets lots of different elements to border:0 (including the table). You'll need to specifically set the border on the table and cells.
To set the border around just the table simply use table.box {border:1px solid #000}. If however you set the border on all sides of the table and cells you will have a border twice as thick as you need.
I therefore use the following trick to set the top and right border of the outside table, and the bottom and left of the table cells. This gives the appearence of an even border across the whole content of the table.
table.box {
border-top: 1px solid #000;
border-right: 1px solid #000;
}
table.box td {
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
I've noticed however you have some empty cells in your box table, so you'll need to remove these to prevent the double borders.
I see no borders in Firefox either.
SDstyle.css, line 16. You do CSS reset which sets border: 0; for a big list of tags, including table, td, tr, th ...
You declare your table like <table class="box">, but at the same time you have no such style defined in your CSS files.
I have some tables in my asp.net MVC application for layout purposes. Even though I usually use divs for most things, in some cases tables make most sense because they already have exactly the layout I'm after in these cases.
The only problem is, as far as I know the borders are supposed to be invisible unless you specify a width and style for the borders. But they aren't... They are rather vague, yes, but there are still light blue borders around each cell. What is that and how do I get rid of them? (Funny thing is I don't remember having seen this before when I used tables, which was a while ago).
I also tried specifically setting the border to 0px on both table and td, but that didn't work either...
Have you tried border: none for CSS or border='0' in the table declaration?
You can use cellspacing attribute in table tag
<table cellspacing='0' border='0'>
The CSS property border-collapse is used to achieve this effect. It will make adjacent cells share the same border. This property has the same end effect as the deprecated cellspacing attribute for tables.
table { border-collapse: collapse; }
Well, it turns out it was just a mistake on my part, the css selector wasn't accurate enough. I don't know why, but it didn't work just saying td{border:none;}, I had to specify table tr td{border:none;}, and then it worked...
Same issue i also faced the problem is css inheriting...may be you are not given in class
check for table or table td css in any of your css files in the solution
and make to 0px
table
{
border: solid 0px #e8eef4;
border-collapse: collapse;
}
table td
{
padding: 5px;
border: solid 0px #e8eef4;
}