html - 以类似的对齐方式设置表格中的文本

Question

如何在一种食物下设置文本:

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>
    .........

例如，我想将文本设置为距左表格边框 30% 左右。

Answer 1

一句话……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>