Hi there
I am trying to give uniform width to all permissionHeader class in this file
but when I run this code I am not getting fixed height in first row second block(ID-List Subadmin,ID-List-staff…).I have fixed width of class permissionHeader.
what’s wrong with my CSS.?
It’s not really clear what you’re asking. What are you expecting to see?
equal width of class permissionHeader
The behavior is typical of normal tables.
The second table in the first row has more content. The text wraps as the width narrows. The same is true of all of the tables at different widths.
What do you want to see? Please make a drawing or fake a screenshot.
Nested tables are not related to one another and cannot be guaranteed to match one another.
What did you do to make that screen shot? You made the browser window wide.
Here’s a screen shot at the minimum width of the page. I added the colorful outlines to the rules in your CSS so you can easily see that rows with longer text are taller than those with narrower text because the longer text has to wrap.
Is a uniform height more important than fluid behavior?
How can I give equal width to all td inside permissionHeader class do I need to change my table structure?
Yes, as Ron said you can’t use nested tables if you want to maintain uniformity of all rows and columns in that table. You will need to create one long row and use colspans to make room and no nested tables.
This is a very rough example of how I would do it but note I have just duplicated the rows and not used your specific data so you will need to replace the data as appropriate but the table structure remains the same.
It uses one row for all the data and uses th to identify sections within the row. The first row of the table must contain enough elements so that in subsequent rows you can use colspan to span cells and thus get the display you wish to achieve. Sometimes this means creating empty cells in the first row of the table to cater for data in subsequent rows where you need wider or smaller content blocks. (I would have put the block and activate wording in the table header and not in the row as that spoils the row a bit but I left it as your example).
All rows and columns are now tied to each other and can be styled uniformly as required.
@PaulOB
ok why you have given first table row scope=col?
vngx,
I just looked at all of the <tr> elements in @Paul’s code. None of them have scope="col" assigned.
However, every <th> in the first row does contain scope="col" because each <th> element/cell represents the top/beginning of a column.
Does that help?
So that the relationship between the header items are defiined as column headers. I have given other th elements a scope of ‘row’ to show the data is horizontal in some cases.
This was only a quick attempt at marking the data but for a complicated table like this you will probably need the ‘headers’ attribute to identify sections. Browse that page to see how the w3c marks up complicated tables.
yeah it helps
ok by applying your code
I have prepare this jsfiddle
Now I want following tasks in this table
1)Default Left and Right Spacing for each row.
2)Left and Right padding on td or th items?
3)When I use either border-left or border-top blue dotted border disappear on that side(see js fiddle)
How can I do these task in this code
The row already seems to have padding applied. It’s not clear what you mean by spacing exactly?
If you mean a margin from the edge of the window then add a wrapper to the table with some horizontal padding applied.
They already have padding here:
.permissionsTable td, .permissionsTable th {
vertical-align:bottom;
text-align:left;
padding:3px 5px;
}
Just apply padding as required. You may need to add classes if you have special circumstances but the padding seems ok to me.
Not all things are easily possible 
The space between sections was made using a white border so perhaps a better solution would be to use the same blue that you are using for those borders.
.column-border {
border-left:10px solid #3665C2;
}
.new-block th {
border-top:10px solid #3665C2;
}
.permissionsTable input {
margin:0;
}
.permissionsTableBorder {
border-top:10px solid #3665C2;
}
Alternatively if you still want the white space then you would need to use empty cells and empty rows for the white space and then you could colour the borders as required.
e.g. for the row you’d do this:
<tr class="new-row"><td colspan="19"> </td></tr>
Then set the background colour to white and remove the css for the 10px border-colours.
For the column space you would need to add empty cells in the right place and colour them white.
e.g.
<td class="spacer"></td>
<th scope="row" colspan="2" class="permissionHeader column-border">ID List-Subadmin</th>
css:
td.spacer{background:white}
Of course you would then need to match all rows with the correct number of items or colspans where needed but I notice you have changed design from the original example you asked for and from my codepen.
It’s really a matter of doing what’s feasible with that big table that you wanted. You would have probably been better with separate individual non nested tables rather than that one long sideways table.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.