 Help with TAble and TD, Cant make the TDs to have different size |
  |
| Elementlover |
 Aug 21 2015, 03:49 AM
Post
#1
|
|
Group: Members Posts: 8 Joined: 13-August 15 Member No.: 23,289  |
HEllo everyone!
I have been trying and trying, googling ect but i cant find whats wrong. I have a table, that have a set size to 850px. I want to manage the 5 columns size (with width) but no matter if i give the TD-tag a class, the Table a class, put it in a div, or write the width directly in the TD-tag it dont change the size from the general TD settings i have for the site. My code: QUOTE <table width="850" border="5" cellspacing="2" bordercolor="#007dc1" background="Products.jpg" align="center"> <br /> <br /> <tr> <td > Nr </td> <td colspan="2">Topic 1</td> <td colspan="2">Topic 2</td> <td colspan="2">Topic 3</td> <td colspan="2">Topic 4</td> </tr> <tr> <td>1</td> <td>Name</td> <td>Points</td> <td>Name</td> <td>Points</td> <td>Name</td> <td>Points</td> <td>Name</td> <td>Points</td> </tr> I want the first column "Nr" to be 10-20px as it only will contain numbers 1-10. Then I want to change the size of the td with "Points" to be smaller then td with "name". This is my general setting (CSS)for tables (i have 2 on the website and I want them to look alike in every regard excepts the cell-sizes) QUOTE td { color: #FFFFFF; font-family: Myriad Pro; width: 210px; text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000; } table { display: block; height:auto; I removed the "wigth="210px" in a attempt, but that just destroyed the other table I had. Anyone have any hints/tips?  |
  |
 
|
| pandy |
Aug 21 2015, 04:11 AM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Using the style attribute in each top row TD to set the width would do it. You could also give each top cell a class or id and you can then write more specific rules in your style sheet that will only match this table and override the general rule.
Generally I don't like to do it this way though. I think it makes more sense to use more specific rule for the "general setting". I don't like when every table, list of whatever it is on a site that doesn't fit in needs a rule to contradict another rule. But that's me. Either will work. |
|
|
|
| Frederiek |
Aug 21 2015, 10:33 AM
Post
#3
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Mind you that IDs need to be unique on each page.
I'd give the number TDs one class and the Points TDs another. Then set a width to each. Keep the width on the generic td selector. BTW, a TABLE is already a block-level element, so you don't have to specify that. Deleting that will set the width to the one you set, instead of the larger rendered width. You don't need to set the height either, as the content of a table will automatically adapt the height. You might like to use a border-collapse: collapse; for the table, so that borders merge better. I don't know what DOCTYPE you use, but a validator might choke on the attributes of the TABLE, as using CSS for that is usually preferred. |
|
|
|
| Elementlover |
Aug 31 2015, 04:47 AM
Post
#4
|
|
Group: Members Posts: 8 Joined: 13-August 15 Member No.: 23,289 |
QUOTE(Frederiek @ Aug 21 2015, 05:33 PM)  Mind you that IDs need to be unique on each page. I'd give the number TDs one class and the Points TDs another. Then set a width to each. Keep the width on the generic td selector. BTW, a TABLE is already a block-level element, so you don't have to specify that. Deleting that will set the width to the one you set, instead of the larger rendered width. You don't need to set the height either, as the content of a table will automatically adapt the height. You might like to use a border-collapse: collapse; for the table, so that borders merge better. I don't know what DOCTYPE you use, but a validator might choke on the attributes of the TABLE, as using CSS for that is usually preferred. Hey! Thank you for all your help I am using: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> I solved the issue with giving each TD on the first row a width directly in the code <tr> <td width="10" bgcolor="#000000"> </td> <td colspan="2" width="210" align="center" bgcolor="#000000"> </td> <td colspan="2" width="210" align="center" bgcolor="#000000"> </td> <td colspan="2" width="210" align="center" bgcolor="#000000"> </td> <td colspan="2" width="210" align="center" bgcolor="#000000"> </td> </tr> This post has been edited by Elementlover: Aug 31 2015, 04:48 AM |
|
|
|
| Frederiek |
Aug 31 2015, 04:56 AM
Post
#5
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Only, the width and bgcolor attributes on TD are deprecated in favour of CSS. See they are greyed out at http://htmlhelp.com/reference/html40/tables/td.html .
|
|
|
|
| pandy |
Aug 31 2015, 07:51 AM
Post
#6
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
But you said you had already tried that. Fact is that you must have done more than that because CSS overrides HTML attributes. You must also have removed the "general" CSS rule you had.
|
|
|
|
| Elementlover |
Aug 31 2015, 11:42 AM
Post
#7
|
|
Group: Members Posts: 8 Joined: 13-August 15 Member No.: 23,289 |
QUOTE(pandy @ Aug 31 2015, 02:51 PM) But you said you had already tried that. Fact is that you must have done more than that because CSS overrides HTML attributes. You must also have removed the "general" CSS rule you had. Hello! Yes, I made a class for the Table and give it other attributes, but with that it didnt go after the general setting anymore |
|
|
|
| pandy |
Aug 31 2015, 04:55 PM
Post
#8
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
OK, but why do you need the HTML attribute?
|
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th April 2024 - 05:42 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC