(Custom) bullet point infront of each HTML Table Row

Question

I'm trying to achieve something like this:

My thought was to make a table out of this and then add bullet points in front of each table row, however, I realized this is not working out, I can't add bullet points to table rows. Is this possible at all with a table or do I need to us an unordered list (or even simply div's?)

Answer 1

Can you please check the below code? Hope it will work for you. We have used pseudo-element and position for the desired output.

Please refer to this link: https://jsfiddle.net/yudizsolutions/ydk0v4bf/1/

 .table-container { padding-left: 50px; position: relative; }.table-container:before { content: ""; position: absolute; width: 2px; height: 100%; background: red; left: 20px; } table { border-collapse: collapse; } table tr td { padding: 5px; border-bottom: 1px solid #e4e4e4; position: relative; } table tr td:first-child:before { content: ""; position: absolute; width: 20px; height: 20px; border: 1px solid red; border-radius: 50%; left: -40px; top: 50%; background: #fff; transform: translateY(-50%); -webkit-transform: translateY(-50%); } table tr td:first-child:after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; top: 50%; left: -32px; transform: translateY(-50%); -webkit-transform: translateY(-50%); background: red; }

 <div class="table-container"> <table> <tr> <td>1</td> <td>Test</td> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quisquam iusto delectus deleniti maiores quam similique molestiae, blanditiis qui, beatae, debitis quidem pariatur amet maxime ipsum? Laudantium voluptate perferendis esse.</td> <td>Demo</td> </tr> <tr> <td>2</td> <td>Test</td> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quisquam iusto delectus deleniti maiores quam similique molestiae, blanditiis qui, beatae, debitis quidem pariatur amet maxime ipsum? Laudantium voluptate perferendis esse.</td> <td>Demo</td> </tr> <tr> <td>3</td> <td>Test</td> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quisquam iusto delectus deleniti maiores quam similique molestiae, blanditiis qui, beatae, debitis quidem pariatur amet maxime ipsum? Laudantium voluptate perferendis esse.</td> <td>Demo</td> </tr> </table> </div>