How to add dotted horizontal line after text in table

Programming
,
1

Hi!

I have a table in html.
I would like to add a horizontal line like in the picture after the texts.

dotted
dotted188×208 4.4 KB

How do I do that?

2

Please show us your code so we can see what you’ve tried so far.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

Agreed. We don’t usually make it a habit of just giving people the answer without at least some effort first.

I had never done this exact effect before so out of curiosity I was able to get it working with some relatively simple CSS that I think you could use in your table. It seems to scale nicely to any type of font used and text size increases.

I will give you a hint as to how I did it :slight_smile: Think of the text and the dotted line as two separate items. There is a layout method that is very good (some might say, extremely flexible) at displaying items side by side in a single row.

4

Hi again!

First of all I am not an expert.
I have downloaded the template Shop Item - Bootstrap Ecommerce Shop Item Template - Start Bootstrap.

html

<html>

<head>
<meta http-equiv="Content-Language" content="sv">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>
<link href="test.css" rel="stylesheet" />

</head>

<body>



<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="100%">
  <tr>
    <td width="50%" style="border-style: none; border-width: medium">One 
 <div>
  Test
</div>
</td>
    <td width="50%" style="border-style: none; border-width: medium">1</td>
  </tr>
  <tr>
    <td width="50%" style="border-style: none; border-width: medium">Twenty</td>
    <td width="50%" style="border-style: none; border-width: medium">20</td>
  </tr>
</table>



</body>

</html>

css

div {
  display: flex;
  width: 300px;
}

div:after {
  border-bottom: 1px dotted black;
  content: '';
  flex: 1;
}
5

I got it work in the example above. But I dont really know where to put it in the template css-file. I have a table in the red ring in the picture, where I want the code. I put it in the wrong place, so the template look terrible.

freecode
freecode1576×740 73.6 KB

6

Again, without being able to see all of your code it is very difficult to help you. The best option would be to put your project in a public place where we can see it, such as codepen or github.