Member Avatar for anand01

hi all ,
I need to display data from database in table format . The thing is, in table horizontal borders should not appear for data rows.

Is there any options available.
Thanks in advance

Edited by anand01 because: n/a
  • 3 Contributors
  • 5 Replies
  • 98 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by anand01

Dani AI

Generated

A concise, maintainable way to hide horizontal separators while keeping vertical dividers is to style the table itself and give cells only left/right borders, rather than trying to remove bottom borders on every data cell. That keeps headers/footers frames intact and avoids collapsed-border oddities. This also follows ’s idea of targeting the data cells while addressing ’s point about not removing the whole table border.

Example: apply a class to the table and add vertical borders to cells; add the top/bottom frame only for header/footer.

/* on the table element: class="vertical-only" */
.vertical-only {
  border-collapse: collapse;
  border-spacing: 0;
}

.vertical-only td {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 8px 10px;
}

.vertical-only td:first-child { border-left: 0; }
.vertical-only td:last-child  { border-right: 0; }

/* keep a top rule for the header and a bottom rule for the table frame */
.vertical-only thead td,
.vertical-only thead th { border-top: 1px solid #ddd; }
.vertical-only tfoot td { border-bottom: 1px solid #ddd; }

If border-collapse creates unwanted merged borders, an alternative is to draw vertical separators with an inset box-shadow on cells; this avoids changing the table collapse model:

.vertical-shadow td {
  position: relative;
  box-shadow: 1px 0 0 #e6e6e6 inset;
}
.vertical-shadow td:last-child { box-shadow: none; }

Troubleshooting: inspect computed styles to find conflicting rules (table, tr or td borders, or an HTML border attribute). Target tbody td if headers must keep borders. For small screens, consider removing vertical dividers since stacked layouts often look cleaner without them.

Recommended Answers

All 5 Replies

Member Avatar for Dandello

for your data td's the css:

.data td {border-bottom:none;}

in the table:

<td class='data'>

of course, you will have to add the css for your vertical borders.

Member Avatar for judryn27

Hi,
you can make the border attribute to none or zero.

Member Avatar for anand01

thanks Dandello and judryn27,


But i dont want to hide whole border ..

Member Avatar for anand01

thanks

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.