Monday 15 July 2013

css - How can I get continuous top and bottom borders in an html table -


I am writing a program that will generate an HTML file to display some data. I need to combine all the columns, so I'm trying to use a single HTML table, but I have solid horizontal lines in between the rows to separate the data. Using the border-top and border-bottom have been able to get most of the methods for what I want, although these horizontal lines that are created, Not concrete (see image).

image from Chrome Bros.

My questions are:

  1. How can I get a solid horizontal line between some rows in my table
  2. In addition to this, a small query is a better way to get a little space left hand I am currently specifying an empty column between column and row labels in the data. The html behind the image is as follows:
       & Lt; / Col & gt; & Lt; Col align = "right" & gt; & Lt; / Col & gt; & Lt; Col align = "right" & gt; & Lt; / Col & gt; & Lt; Col align = "right" & gt; & Lt; / Col & gt; & Lt; Col align = "right" & gt; & Lt; / Col & gt; & Lt; Tr class = "border_top" & gt; & Lt; TD & gt; & Lt; P & gt; XYZ1 & lt; / P & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; / TD & gt; & Lt; TD & gt; 2.120 & lt; / TD & gt; & Lt; Td> & Lt; Span style = "color: blue" & gt; 2.280 & lt; / Span & gt; & Lt; / Td> & Lt; Td> & Lt; Span style = "color: blue" & gt; 2.810 & lt; / Span & gt; & Lt; / Td> & Lt; TD & gt; 3.000 & lt; / TD & gt; & Lt; / TR & gt; & Lt; Tr class = "border_bottom" & gt; & Lt; TD & gt; & Lt; P & gt; ABC1 & lt; / P & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; / TD & gt; & Lt; TD & gt; 1.370 & lt; / TD & gt; & Lt; Td> & Lt; Span style = "color: blue" & gt; 1.550 & lt; / Span & gt; & Lt; / Td> & Lt; TD & gt; 1.690 & lt; / TD & gt; & Lt; Td> & Lt; Span style = "color: blue" & gt; 1.780 & lt; / Span & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; P & gt; XYZ2 & lt; / P & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; / TD & gt; & Lt; Td> & Lt; Span style = "color: blue" & gt; 1. 9 00 & lt; / Span & gt; & Lt; / Td> & Lt; TD & gt; 1.940 & lt; / TD & gt; & Lt; TD & gt; 2.050 & lt; / TD & gt; & Lt; Td> & Lt; Span style = "color: blue" & gt; 2.100 & lt; / Span & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; Tr class = "border_bottom" & gt; & Lt; TD & gt; & Lt; P & gt; ABC2 & lt; / P & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; / TD & gt; & Lt; Td> & Lt; Span style = "color: blue" & gt; 1. 9 10 & lt; / Span & gt; & Lt; / Td> & Lt; TD & gt; 1.950 & lt; / TD & gt; & Lt; TD & gt; 2.060 & lt; / TD & gt; & Lt; Td> & Lt; Span style = "color: blue" & gt; 2.100 & lt; / Span & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Body & gt; & Lt; / Html & gt;    

    remove the default in CSS border-spacing and In the cells, add padding

      table {boundary-difference: 0} TD {padding: 10px; }   



No comments:

Post a Comment