I’m currently trying to figure out how to do this for the last row in table.
element:last-child {
padding-bottom: 30;
}
.inner:first-child .table {
padding-top: 30;
}
OK, let’s stop for a moment.
I asked you about educational possibilities. I would like to hear your position about that.
Next, are you attempting to add space above the top row and below the last row, or what? Your code does not make sense without an explanation of what it is to do.
both first row and last row
Why just the first and last rows? What about the rows in between?
This is what I’m using now.
body {
background: #000000;
padding:0;
margin:0;
}
table {
border-spacing:0;
}
td.one{
outline: 1px solid #4703C5;
padding-top: 30px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
}
a:link {
background-color: orange;
color: white;
width:300px;
height:24px;
display: block;
}
td.two{
outline: 1px solid #4703C5;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
}
td.three{
outline: 1px solid #4703C5;
padding-top: 30px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
}
h3 {
color: blue;
font-weight:bold;
line-height:1;
font-size:30px;
margin: 0;
}
I did not ask what you are using now. I am trying to visualize what you want to achieve.
Also, I am changing the non-table code so it has rows and behaves like a table. I am not working on the table code.
Going back to this example screen shot. What do you want the code that you are trying to add to do? How would it affect this screen shot?
I have a question, what’s the css code for vertical-allign- top for a table?
There are plenty of on-line references available where you can seek out answer for yourself without have to wait for someone to offer an answer.
nu validator said not to us <table class="center"> said it’s obsolete.
Are you sure?
What was the exact error message?
1 Like
oh, there’s no error this time. I’ll use it then. thanks.
Can you tell me why this doesn’t do anything when it’s enabled.
It just stays the same
}
td table {
border-collapse:collapse ;
When you remove collapse then add it there’s no visible effect
Because the selector targets a table within a td, that is a nested table, but there is no nested table in your html, so it targets nothing, or something which does not exist.
1 Like
I don’t see the selector:-
td table
in that code.
The selector that has the property border-collapse:collapse targets an element that does exist in the html.
Apparently you dropped me earlier in this conversation.
This is the non-HTML-table code arranged with rows like a table. Copy and paste one complete row to add another row with 3 cells.
Since you did not clarify how you wanted the cells treated, There are no changes to the padding in the cells.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>asasass13b</title>
<!--
https://www.sitepoint.com/community/t/miscommunication-how-do-you-center-non-tables/228464/77
asasass
2016.06.27 07:16
-->
<style type="text/css">
html,body {
height:100%;
padding:0;
margin:0;
}
.outer {
display:table;
height:100%;
margin:0 auto;
}
.inner {
display:table;
table-layout:fixed;
border-collapse:collapse;
}
.trow {display:table-row;}
.tcell {
display:table-cell;
vertical-align:middle;
}
.inner .tcell {
width:300px;
vertical-align:top;
border:1px solid blue;
color:#0059dd;
line-height:1;
font-size:30px;
font-weight:bold;
padding-top:0px;
padding-right:50px;
padding-bottom:100px;
padding-left:50px;
}
.trow:last-child .tcell {
padding-bottom:0;
}
.controls {
height:24px;
color:#000000;
background-color:#E2AB58;
}
</style>
</head>
<body>
<div class="outer">
<div class="tcell">
<div class="inner">
<div class="trow">
<div class="tcell">
Radio 1
<div class="controls"></div>
</div>
<div class="tcell">
Radio 2
<div class="controls"></div>
</div>
<div class="tcell">
Radio 3
<div class="controls"></div>
</div>
</div>
<div class="trow">
<div class="tcell">
Radio 4
<div class="controls"></div>
</div>
<div class="tcell">
Radio 5
<div class="controls"></div>
</div>
<div class="tcell">
Radio 6
<div class="controls"></div>
</div>
</div>
<div class="trow">
<div class="tcell">
Radio 7
<div class="controls"></div>
</div>
<div class="tcell">
Radio 8
<div class="controls"></div>
</div>
<div class="tcell">
Radio 9
<div class="controls"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
1 Like
isn’t that the same as this:
No. Not at all. The code that I just posted is one long CSS table. It will behave almost like that one long HTML table that you posted. I say “almost” because I did not change any of the styles on the table cells. No input, no change.
How do I fix the space between the text and the block?
I did it:
1 Like
What would I need to adjust on the table for it to look like a non-table?
Is this at all possible?
Table
http://tabletest245.blogspot.com/
Non-table
https://jsfiddle.net/a1gspkak/4/
http://nontabletest.blogspot.com/