如何让我的单元格对齐左边的文本?

时间:2015-06-08 21:10:54

标签: html css html-table

我正在制作一个包含HTML和CSS的表格,我似乎无法获得特定的单元格来将文本对齐到左侧。

这是我的表:

<table>
        <tr class="l0">
            <th rowspan="2">Employer/Employee Group</th>
            <th colspan="2">Duty</th>
            <th rowspan="2">Experience (Years)</th>
            <th rowspan="2">No. Of People</th>
            <th colspan="5">Responsibilities</th>
        </tr>
        <tr class="l0">
            <th>Permanent Duty</th>
            <th>As Required</th>
            <th>Job Training</th>
            <th>Product Quality</th>
            <th>Retention</th>
            <th>Human Resources</th>
            <th>Special Projects</th>
        </tr>


        <tr class="l2">
            <th colspan="10">US Army - Colorado Army National Guard</th>
        </tr>
        <tr class="l1">
            <td>Technicians/Soldiers</td>
            <td>*</td>
            <td></td>
            <td>3</td>
            <td>2 - 6</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td></td>
            <td>*</td>
        </tr>


        <tr class="l2">
            <th colspan="10">SPEC, Inc.</th>
        </tr>
        <tr class="l1">
            <td>Administrative Staff</td>
            <td></td>
            <td>*</td>
            <td rowspan="4">5</td>
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Engineers and Scientists</td>
            <td></td>
            <td>*</td>
            <td>5</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Technicians</td>
            <td>*</td>
            <td></td>
            <td>4</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Contract Technicians</td>
            <td>*</td>
            <td></td>
            <td>> 20</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
        </tr>

        <tr class="l2">
            <th colspan="10">Radtec Engineering, Inc.</th>
        </tr>
        <tr class="l1">
            <td>Administrative Staff</td>
            <td></td>
            <td>*</td>
            <td rowspan="4">4</td>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Engineers</td>
            <td></td>
            <td>*</td>
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Technicians</td>
            <td>*</td>
            <td></td>
            <td>7</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
        </tr>
        <tr class="l1">
            <td>Contractors</td>
            <td>*</td>
            <td></td>
            <td>1</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
            <td>*</td>
        </tr>
    </table>

我的CSS没有任何关于对齐中心的说法,只有当我运行它时行仍保持居中。

这是我的CSS:

 div.sqs-slice-group.copy.restrict-width-1000.text-align-center.align-center.align-center-absolute {
  top: 30px;
}

#main-navigation {
  word-spacing: 30px;
}

#footerBlocks {
  float: right; 
}

div.foo {
    float: right;       
}


table {
    width: 100%;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px;
    margin: 5px;
}

/* Heading, odd and even lines for table shading */
tr.s0 {
    background: #B2B2B2;
}
tr.s1 {
    background: #FFFFFF;
}
tr.s2 {
    background: #E6E6E6;
}

/* Leadership Tables */
tr.l0 {
    background: #B2B2B2;
    text-align: left;
}
tr.l1 {
    background: #FFFFFF;
    text-align: left;
}
tr.l2 {
    background: #E6E6E6;
    text-align: left;
}

默认情况下,表标题标签是否居中?

2 个答案:

答案 0 :(得分:1)

  

默认情况下,表标题标签是否居中?

居中(水平和垂直)<TH>元素的内容是W3C's HTML 4.01 Specification section on tables中建议的一部分:

  

可视用户代理通常在单元格内垂直和水平居中渲染TH元素,并使用粗体字体。

要左对齐,只需将以下内容添加到CSS中:

th {
    text-align: left;
}

您还可以执行以下操作:

<td style="text-align:left">

答案 1 :(得分:0)

你试过吗

request.user_has_logged_in
HTML中的

http://www.w3schools.com/tags/att_td_align.asp