Home/ Questions/Q 7605863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T00:16:26+00:00

I have a table in my application (generated dynamically) that has 3 columns. The

  • 0

I have a table in my application (generated dynamically) that has 3 columns. The cells where the text is a too long, it wraps around which is fine except the rounded borders now look bad.

enter image description here

Currently, my table is wrapped in a DIV with an id set as item-list and the CSS is as follows:

#item-list {
   text-align: center;
}


#item-list table {
margin: auto auto; 
}

#item-list td {
padding: 10px;
text-align: center;
}

#item-list a {
font-size: 0.8em;
color: #FFF;
margin: 10px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
padding: 4px;
padding-left: 10px;
padding-right: 10px;
background-color: #1a546a;
text-decoration: none;
font-weight: bold;
}

#item-list a:hover {
background-color: #8f2525;
}

My question is, is there a way using CSS to make the wrapped text still be rounded on all edges?

[Disclaimer] My expertise is in PHP. CSS is a skill where I know enough to usually accomplish what I need to do, but not much beyond amateurish.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add display: block; to your #item-list a.

    #item-list a {
  font-size: 0.8em;
  color: #FFF;
  display: block;
  margin: 10px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  padding: 4px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #1a546a;
  text-decoration: none;
  font-weight: bold;
}

    I’ve set up a quick example for you – http://jsfiddle.net/spacebeers/g5YcT/

    Display Block

    The element is displayed as a block element (like paragraphs and
    headers). A block element has some whitespace above and below it and
    does not tolerate any HTML elements next to it

    • 0