Question

我有一个基本的html表。我试图调整＆＃34; Tree＆＃34;在4个树柱的中心。无论我进入我的保证金的数字是多少，它似乎都不再是右边的。我做错了什么？

<!DOCTYPE html>

<!--2.10-->
<html lang="en">
<head>
<title> Trees </title>
<meta charset = "utf-8"/>
<style>
.center {
    margin: 0px 10px 0px 25px;
    width: 30%;
    border:3px solid #8AC007;
    padding: 1px;
}

</style>
</head>

<body>
<table style="width:25%">
    <caption>Tree Properties</caption>
    <tr>
        <td rowspan = "6">Characteristics </td>
        <th colspan = "5"> <div class = "center"> Tree </div> </th>
    </tr>
    <tr>
        <th> </th>
        <th> Pine </th>
        <th> Maple </th>
        <th> Oak </th>
        <th> Fir </th>
    </tr>
    <tr>
        <th> Average Height(ft) </th>
        <td> 100 </td>
        <td> 80 </td>
        <td> 90 </td>
        <td> 220 </td>
    </tr>
    <tr>
        <th> Average Width(ft)</th>
        <td> 2.2 </td>
        <td> 2 </td>
        <td> 26 </td>
        <td> 5 </td>
    </tr>
    <tr>
        <th> Typical Life Span(yrs) </th>
        <td> 0  </td>
        <td> 0 </td>
        <td> 0 </td>
        <td> 0 </td>
    </tr>
    <tr>
        <th> Leaf Type </th>
        <td> 0 </td>
        <td> 0 </td>
        <td> 0  </td>
        <td> 0 </td>
    </tr>
</table>

Answer 1

一种方法

<强>演示

https://jsfiddle.net/02r7fwr5/

<强>的CSS

.center {
   display:inline-block;
    width: 30%;
    border:3px solid #8AC007;
    padding: 1px;
    margin-right:-27%;
}

Answer 2

将您的保证金从margin:auto;更改为<tr> <td rowspan = "6">Characteristics </td> <th></th> <th colspan = "4"> <div class = "center">Tree</div> </th> </tr>。然后添加一个并更改colspan和列，如下所示。

>/dev/stderr

在html中重新定位表格中的文本

2 个答案: