how to get rounded cells for my table

Question

I am trying to get rounded cells for my table but I am unable to execute css as border-radius is not working in my code i.e., table { border-spacing: 10px; border-collapse: seperate;
}

 <tr>
<td style=\"border:1px solid black; background-color:#FE0000; color:white;  text-align:center;\"><b>xxxxxxxxxxx</b></td>
<td style=\"border:1px solid black; background-color:#F69546; color:white; text-align:center;\"><b>xxxxxxxxxxx</b></td>
<td style=\"border:1px solid black; background-color:#92D14F; color:white; text-align:center;\"><b>xxxxxxxxx</b></td>

here I am using tcpdf and html

`style=\"...."` shouldn't have backslash and you have a closing tag `` with not opening one. — JamieC, Feb 05 '16 at 09:47
but i need to keep backlash because I am writing this html for generating pdf......!!! — siva sanker, Feb 05 '16 at 09:51
then you should change `$html ="html code here"` to `$html ='html code here'` then remove the `blackslash`'s — Jamie Harding, Feb 05 '16 at 10:02
I am able to run pdf, but only border-radius is not working !!!! other html codes are working — siva sanker, Feb 05 '16 at 10:09

Krish · Answer 1 · 2016-02-05T10:16:08.097

1

Give border-radius for child element of the td .

td b{
  border: solid 1px #ccc;
  border-radius: 50%;
  display:block;
  padding: 10px;
  width:100px;
  height:100px;
}

<table>
  <tr>
<tr>
<td style=\"border:1px solid black; background-color:#FE0000; color:white;  text-align:center;\"><b>xxxxxxxxxxx</b></td>
<td style=\"border:1px solid black; background-color:#F69546; color:white; text-align:center;\"><b>xxxxxxxxxxx</b></td>
<td style=\"border:1px solid black; background-color:#92D14F; color:white; text-align:center;\"><b>xxxxxxxxx</b></td>
  </tr>
  </table>

edited Feb 05 '16 at 10:16

answered Feb 05 '16 at 09:56

Krish

1,884
2
16
40

this code is working in palin html but in TCPDF conversion is not working specially border radius it shows only rectangle box. – siva sanker Feb 05 '16 at 10:04
This html code was copied from you question, then why? Give a width and height for the element and give border-radius, then it will be rounded element. answer is updated please check. – Krish Feb 05 '16 at 10:15

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

You should use php singular quotes ' ' with html with double quotes on attributes " "

See : LINK (SO Question)

UPDATED: added table opening and closing tags and tr closing tag

change $html to

$html ="
<table>
      <tr>
         <td style=\"border:1px solid black; background-color:#FE0000; color:white;  text-align:center;\"><b>xxxxxxxxxxx</b></td>
         <td style=\"border:1px solid black; background-color:#F69546; color:white; text-align:center;\"><b>xxxxxxxxxxx</b></td>
         <td style=\"border:1px solid black; background-color:#92D14F; color:white; text-align:center;\"><b>xxxxxxxxx</b></td>
     </tr>
</table>
";

to

$html ='
<table>
      <tr>
         <td style="border:1px solid black; background-color:#FE0000; color:white;  text-align:center;"><b>xxxxxxxxxxx</b></td>
         <td style="border:1px solid black; background-color:#F69546; color:white; text-align:center;"><b>xxxxxxxxxxx</b></td>
         <td style="border:1px solid black; background-color:#92D14F; color:white; text-align:center;"><b>xxxxxxxxx</b></td>
     </tr>
</table>
';

also try using this to echo the css if not already included.

$html = "table { border-spacing: 10px; border-collapse: seperate; }";

or

$html = "td b { border-spacing: 10px; border-collapse: seperate; }";

edited May 23 '17 at 12:15

Community

1
1

answered Feb 05 '16 at 10:07

Jamie Harding

383
3
22

I also tried this one html running succesfully but I am unable to get border-radius function working !!! – siva sanker Feb 05 '16 at 10:15
ya css is already includeed in my code – siva sanker Feb 05 '16 at 10:25
@sivasanker then you should try the updated table html. – Jamie Harding Feb 05 '16 at 10:29
sorry but I didn't understand your comment completely – siva sanker Feb 05 '16 at 10:32
try this : $html ='

xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxx

'; and this : $html = "td b { border-spacing: 10px; border-collapse: seperate; }"; – Jamie Harding Feb 05 '16 at 10:37
@sivasanker Join this chat so we can the question resolved: http://chat.stackoverflow.com/rooms/102693/how-to-get-rounded-cells-for-my-table – Jamie Harding Feb 05 '16 at 10:56

score 0 · Answer 3 · answered Mar 17 '18 at 20:29

0

TCPDF has a very limited CSS support. It doesn't support all attributes.

Currently, only the following CSS attributes are supported:

font-family font-size font-weight font-style color background-color text-decoration width height text-align

answered Mar 17 '18 at 20:29

Dev

64
6

how to get rounded cells for my table

3 Answers3