0

How I can set text under one aliment:

enter image description here

https://jsfiddle.net/w7eekbcL/2/

.............. <table style="width:100%"> <tr> <td colspan="3" style="font-family:verdana; color:#424242">main list</td> </tr> <tr> <td>for test one</td> <td>and test second</td> <td>1 test threee</td> </tr> <tr> <td>&bull; test test four</td> <td>&bull; test 2 four</td> <td>&bull; test 4 four</td> </tr> <tr> <td>&bull; tests software </td> <td>&bull; software table</td> <td>&bull; test 7 four</td> </tr> <tr> <td>&bull; test 8 four</td> <td>&bull; test 3 four</td> <td></td> </tr> <tr> <td> </td> <td>&bull; test and four</td> <td> </td> </tr> .........

For example I want to set the text around 30% from the left table border.

Improve this question
2
  • The fiddle is empty, just an fyi. Let me know when it's ready, happy to help. Commented Mar 6, 2016 at 22:19
  • Can you try now, please? Commented Mar 6, 2016 at 22:22

2 Answers 2

Reset to default
1

In a word...padding

Fiddle Demo

tr td { border: 1px solid lightblue; text-align: center; } tr:nth-child(n+3) td { padding-left: 10%; border: 1px solid lightblue; text-align: left; }
<table style="width:100%"> <tr> <td colspan="3" style="font-family:verdana; color:#424242">main list</td> </tr> <tr> <td>for test one</td> <td>and test second</td> <td>1 test threee</td> </tr> <tr> <td>&bull; test test four</td> <td>&bull; test 2 four</td> <td>&bull; test 4 four</td> </tr> <tr> <td>&bull; tests software</td> <td>&bull; software table</td> <td>&bull; test 7 four</td> </tr> <tr> <td>&bull; test 8 four</td> <td>&bull; test 3 four</td> <td></td> </tr> <tr> <td></td> <td>&bull; test and four</td> <td></td> </tr> </table>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Very good solution but I want to apply this only on the rows with bullets.
Then adjust as required...be specific in your selectors. jsfiddle.net/aLjudn8y/1
I tried to use this code but the alignment of the complete code is not very good. Can you see the code from here jsfiddle.net/w7eekbcL/2?
0

Updated :

table, th { border: 1px solid black; text-align: center; } .textLeft { text-align: left; } .text-center { text-align: center; } td { border: 1px solid black; text-align: left; } .paddingleft { padding-left: 10%; }
<table style="width:100%"> <tr> <td colspan="3" style="font-family:verdana; color:#424242">main list</td> </tr> <tr> <td>for test one</td> <td>and test second</td> <td>1 test threee</td> </tr> <tr class="firstRow"> <td>&bull; test test four</td> <td>&bull; test 2 four</td> <td>&bull; test 4 four</td> </tr> <tr> <td>&bull; tests software </td> <td>&bull; software table</td> <td>&bull; test 7 four</td> </tr> <tr> <td>&bull; test 8 four</td> <td>&bull; test 3 four</td> <td></td> </tr> <tr> <td> </td> <td>&bull; test and four</td> <td> </td> </tr>

Here is a sample of a combination of helper classes that help align.

Improve this answer

4 Comments

@PeterPenzov please see changes., Depending on the css of the table rows, and table if your using something like bootstrap best to use percent since the majority of it is percent wise.
I get thus result tinypic.com/r/2it32as/9 Is there any other solution for fixed alignment. jsfiddle.net/w7eekbcL/2
very possible, just depends on the rest of the css. something may be overriding the alignment. Tweaking the percent from left padding is not working with a greater percentage. You could also give a class to the <tr> the left and different css to the rest of the table rows
Here is the result when I add the complete code codepen.io/anon/pen/zqrvVE?editors=1100

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.