Member Avatar for DBB1

Hello,
:-O
If some one could tell me how I can have vertical border on the right side of each cell.

Suppose my table tag has the following code:

<table style="border-style:solid; border-width:1px; border-color:red;>

and my <td> tag has the following code:

<td style="vertical-align:top; text-align:left;">

I would like to know:

  1. How to set the vertical border on the right hand side of a cell (using the "inline style"
  2. How to set the color (again using the "inline style")
  3. The cell values, for example, are: Home, About us, Remittance procedures

Thanks a lot.

Durga Basnet

Edited by DBB1 because: n/a
  • 2 Contributors
  • 2 Replies
  • 101 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by DBB1

Dani AI

Generated

Good call by to point at the side-specific CSS and well done for getting it to work with an inline style. A few practical notes and cleaner alternatives that were not mentioned in the thread:

Using a class is easier to maintain than repeating inline styles. Example:

<style>
td.cell-right {
  border-right: 2px solid #cc0000;
  padding: 6px;
}
</style>

<td class="cell-right">Home</td>

If the table already has a border or you see single/double lines, check how the table merges borders. When border-collapse is collapse, adjacent cell borders are combined; if you need each cell to keep its own right edge, use separated borders and remove spacing:

table { border-collapse: separate; border-spacing: 0; }

If you want every cell except the last column to have a right border (so the table right edge stays clean), target cells with a selector rather than adding classes to every cell:

tr td:not(:last-child) { border-right: 1px solid #ddd; }

Small tips: use border-right-color, border-right-style and border-right-width if you need to change only one aspect; prefer CSS classes over inline styles for accessibility and easier theme changes; and ensure border colors meet contrast needs. For details on how side-specific borders and collapsed table borders behave, see the MDN references for border-right and border-collapse.

Recommended Answers

All 2 Replies

Member Avatar for nizuya

I'm not quite sure what you are wanting to do...
Do you want to keep the border around the whole table or do you mean to replace that with the right side border?

In any case, you can use the CSS tag "border-right" and define the style, size and color. You must apply this style to the td tag specifically in order to get it to apply to a cell.
example:

<td style="border-right: solid 1px #ffffff">
Member Avatar for DBB1 
<td style="border-right-style:solid;border-right-width:1px; border-color:red; text-align:center">

Thanks, luckily, I already solved that.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.