MyBB Community Forums

Full Version: Applying CSS to far right and left cells?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hey guys,

Does anyone know how I can add CSS to the far left and far right cells in a table?
Ive attached an image to roughly explain what im after.

I looking for the left and right tcat cells to have border-radius,
and the top left, top right, bottom left, bottom right cells of the threadlist to have border-radius.

Thanks again, let me know if you dont understand.
Just add into the <td> tags of the left tcat cell, inside style=".., 'border-top-left-radius: xpx' (x a certain numer) + 'border-bottom-left-radius: xpx'.

Into the right side tcat cell, enter 'border-top-right-radius: xpx' + 'border-bottom-right-radius: xpx'.

You can do the same for the trow1, trow2, thead and tfoot.

You can also do this by defining a few new css classes with the appropriate formatting.
This will do it to the cell though, and not the complete row.
And with the trow1 and trow1 , id need CSS for the top corners of the first row and then the bottom corners of the last row.
For an example of what im after, take a look at the HF styling.

thead tr:only-child td:first-child, tr:first-child td:first-child {
    border-radius: 5px 0 0 0;
}
thead tr:only-child td:last-child, tr:first-child td:last-child {
    border-radius: 0 5px 0 0;
}
tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
}
tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
}
tr:only-child td:first-child {
    border-radius: 5px 0 0 5px;
}
tr:only-child td:last-child {
    border-radius: 0 5px 5px 0;
}
.tborder, tr:only-child td:only-child {
    border-radius: 5px 5px 5px 5px;
}
tr:last-child td:only-child, thead ~ tbody tr:only-child td, #posts .tborder[style*="border-top-width"], .tborder[style*="border-top-width"], .tborder[style*="border-top-width"] tbody tr td.tfoot {
    border-radius: 0 0 5px 5px;
}
tr:first-child td:only-child, thead tr:only-child td:only-child, .tborder[style*="border-bottom-width"], .tborder[style*="border-bottom-width"] tbody tr td, #posts .tborder[style*="top: 5"]:last-child {
    border-radius: 5px 5px 0 0;
}
thead ~ tbody tr:first-child td:only-child, thead ~ tbody tr:first-child td:first-child, thead ~ tbody tr:first-child td:last-child, #posts .tborder[style*="border-top-width"] tbody tr:first-child td:only-child, #posts .tborder[style*="top: 5"] tbody tr:last-child td:only-child {
    border-radius: 0 0 0 0;
}

Not exactly what im after, and im having problems understanding it all.