Fatal编程技术网
  • html/
  • Html 在表格中设计一行-CSS

Html 在表格中设计一行-CSS

html

Html 在表格中设计一行-CSS,html,css-tables,Html,Css Tables,我正在尝试制作一个应该是这样的表（这应该是表中的一行）： 但我对CSS还不熟悉，而且它越来越奇怪了！ 这是我的代码： HTML: <tr> <td> <div class="instruct"><?= $value->CustomerName;?></div> <div></div> <div class="instruct" style="

我正在尝试制作一个应该是这样的表（这应该是表中的一行）：

但我对CSS还不熟悉，而且它越来越奇怪了！ 这是我的代码：

HTML:

 <tr>
    <td>
        <div class="instruct"><?= $value->CustomerName;?></div>
        <div></div>
        <div class="instruct" style="width:60%;">
            <?= $value->Building;?>&nbsp;<?= $value->FloorRoom;?>
        </div>
        <div class="instruct" style="width:40%;">1986</div>
    </td>
</tr>

<table>
    <tbody>
        <tr>
            <td colspan='2'>Tex1<img src='http://lorempixel.com/64/64' /></td>
        </tr>
        <tr>
            <td>Tex2</td>
            <td>Tex3</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan='2'>Tex1<img src='http://lorempixel.com/64/64' /></td>
        </tr>
        <tr>
            <td>Tex2</td>
           <td>Tex3</td>
        </tr>
    </tbody>

</table>

td { /* I have used a generic td selector for demo, but you can assign and use classes */
    opacity: 0.5;
    width: 45%;
    padding: 8px 10px 10px 10px;
    border: 1px solid #e6e6e6;
    background: #AA3333;
    font-size: 105%;
    -webkit-transition: opacity 350ms ease-out;
    -moz-transition: opacity 350ms ease-out;
    -o-transition: opacity 350ms ease-out;
    transition: opacity 350ms ease-out;
    text-align: center;
    border-radius: 8px;
}

tbody{
    display: block;
    background: #FFEAFE; /* the lighter background color for group */
    border-radius: 8px;
    margin-bottom: 8px; /* separator between each group */
}

img{ /* to float the image to the right */
    float: right;
}
td:hover{ /* for a simple hover transition effect */
    opacity: 1; 
}
我做错了什么？它甚至与上图中的样子不太接近

为harry编辑

您应该使用以下内容：

第一个
中的
colspan=“2”
属性将使此单元格占据两个单元格的位置

<table>
    <tr>
        <td id="large" colspan="2">Text 1</td>
    </tr>
    <tr>
        <td>Text 2</td>
        <td>Text 3</td>
    </tr>
</table>


文本1
文本2
文本3
现场示例

您应该使用以下内容：

第一个
中的
colspan=“2”
属性将使此单元格占据两个单元格的位置

<table>
    <tr>
        <td id="large" colspan="2">Text 1</td>
    </tr>
    <tr>
        <td>Text 2</td>
        <td>Text 3</td>
    </tr>
</table>


文本1
文本2
文本3
现场示例

您可以使用
colspan
属性来实现此布局，而无需在
td
中添加额外的
div
标记。为
colspan
指定的数值指示应将多少列合并为一列

HTML:

 <tr>
    <td>
        <div class="instruct"><?= $value->CustomerName;?></div>
        <div></div>
        <div class="instruct" style="width:60%;">
            <?= $value->Building;?>&nbsp;<?= $value->FloorRoom;?>
        </div>
        <div class="instruct" style="width:40%;">1986</div>
    </td>
</tr>

<table>
    <tbody>
        <tr>
            <td colspan='2'>Tex1<img src='http://lorempixel.com/64/64' /></td>
        </tr>
        <tr>
            <td>Tex2</td>
            <td>Tex3</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan='2'>Tex1<img src='http://lorempixel.com/64/64' /></td>
        </tr>
        <tr>
            <td>Tex2</td>
           <td>Tex3</td>
        </tr>
    </tbody>

</table>

td { /* I have used a generic td selector for demo, but you can assign and use classes */
    opacity: 0.5;
    width: 45%;
    padding: 8px 10px 10px 10px;
    border: 1px solid #e6e6e6;
    background: #AA3333;
    font-size: 105%;
    -webkit-transition: opacity 350ms ease-out;
    -moz-transition: opacity 350ms ease-out;
    -o-transition: opacity 350ms ease-out;
    transition: opacity 350ms ease-out;
    text-align: center;
    border-radius: 8px;
}

tbody{
    display: block;
    background: #FFEAFE; /* the lighter background color for group */
    border-radius: 8px;
    margin-bottom: 8px; /* separator between each group */
}

img{ /* to float the image to the right */
    float: right;
}
td:hover{ /* for a simple hover transition effect */
    opacity: 1; 
}

您可以使用
colspan
属性来实现此布局，而无需在
td
中添加额外的
div
标记。为
colspan
指定的数值指示应将多少列合并为一列

HTML:

 <tr>
    <td>
        <div class="instruct"><?= $value->CustomerName;?></div>
        <div></div>
        <div class="instruct" style="width:60%;">
            <?= $value->Building;?>&nbsp;<?= $value->FloorRoom;?>
        </div>
        <div class="instruct" style="width:40%;">1986</div>
    </td>
</tr>

<table>
    <tbody>
        <tr>
            <td colspan='2'>Tex1<img src='http://lorempixel.com/64/64' /></td>
        </tr>
        <tr>
            <td>Tex2</td>
            <td>Tex3</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan='2'>Tex1<img src='http://lorempixel.com/64/64' /></td>
        </tr>
        <tr>
            <td>Tex2</td>
           <td>Tex3</td>
        </tr>
    </tbody>

</table>

td { /* I have used a generic td selector for demo, but you can assign and use classes */
    opacity: 0.5;
    width: 45%;
    padding: 8px 10px 10px 10px;
    border: 1px solid #e6e6e6;
    background: #AA3333;
    font-size: 105%;
    -webkit-transition: opacity 350ms ease-out;
    -moz-transition: opacity 350ms ease-out;
    -o-transition: opacity 350ms ease-out;
    transition: opacity 350ms ease-out;
    text-align: center;
    border-radius: 8px;
}

tbody{
    display: block;
    background: #FFEAFE; /* the lighter background color for group */
    border-radius: 8px;
    margin-bottom: 8px; /* separator between each group */
}

img{ /* to float the image to the right */
    float: right;
}
td:hover{ /* for a simple hover transition effect */
    opacity: 1; 
}

是否要将这3个div容器创建到表单元格中？ 因为如果不是，你应该有这样一个结构：

<table>
   <tr >
      <td colspan='2'>Text1</td>
   </tr>
   <tr>
      <td>Text2</td>
      <td>Text3</td>
   </tr>
</table>


文本1
文本2
文本3
另外，我可以向您解释如何定位div以获得想要的结果。

是否要将这3个div容器创建到表单元格中？ 因为如果不是，你应该有这样一个结构：

<table>
   <tr >
      <td colspan='2'>Text1</td>
   </tr>
   <tr>
      <td>Text2</td>
      <td>Text3</td>
   </tr>
</table>


文本1
文本2
文本3
此外，我可以向您解释如何定位div以获得想要的结果。

您可以尝试以下方法：

.instruct
   {
   float:left;
    padding: 8px 10px 10px 10px;
    border: 1px solid #e6e6e6;
    background: #FFEAFE;
    font-size: 105%;
    -webkit-transition: opacity 350ms ease-out;
    -moz-transition: opacity 350ms ease-out;
    -o-transition: opacity 350ms ease-out;
    transition: opacity 350ms ease-out;

    }
您可以尝试以下方法：

.instruct
   {
   float:left;
    padding: 8px 10px 10px 10px;
    border: 1px solid #e6e6e6;
    background: #FFEAFE;
    font-size: 105%;
    -webkit-transition: opacity 350ms ease-out;
    -moz-transition: opacity 350ms ease-out;
    -o-transition: opacity 350ms ease-out;
    transition: opacity 350ms ease-out;

    }
你可以试试这样的

HTML

<table>
    <tr>
        <td colspan='2'>Tex1</td>
    </tr>
    <tr>
        <td>Tex2</td>
        <td>Tex3</td>
    </tr>
</table>
提琴：

你可以试试这样的

HTML

<table>
    <tr>
        <td colspan='2'>Tex1</td>
    </tr>
    <tr>
        <td>Tex2</td>
        <td>Tex3</td>
    </tr>
</table>
Fiddle:

我认为使用单独的table类的colspan将完成您的工作=）

我认为使用单独的table类的colspan将完成您的工作=）

为什么在表中使用
div
s？在第一行使用
colspan
不是更好吗？Harry，正如我说的，我是css新手。如果你能教我如何正确地做这件事，我会很高兴的！哦，是的，有可能。可以像谢谢哈利那样做！如果我想在第一个单元格中添加图像？像箭一样？（文本将在左角，箭头在右角？*箭头符号告诉人们可以按该行为什么在表中使用
div
s？在第一行使用
colspan
不是更好吗？Harry，正如我说的，我是css新手。如果你能教我如何正确地做这件事，我会很高兴的！哦，是的，有可能。可以像谢谢哈利那样做！如果我想在第一个单元格中添加图像？像箭一样？（文本将在左角，箭头在右角？*箭头符号告诉人们该行可以按OK，您快了50秒：pOk，您快了50秒：p标签是表的声明。然后，在内部，您将为表中的每一行添加一个标记。在您的示例中，需要两行，因此让我们放置两个标记。最后，每个标记表示一个单元格。第一行中只需要一个单元格，但宽度是下一行的两倍。因此，为了精确到宽度的两倍，您在第一个标签中添加了一个具有colspan='2'属性的标记。在第二行，放两个普通单元格，标签是表的声明。然后，在内部，您将为表中的每一行添加一个标记。在您的示例中，需要两行，因此让我们放置两个标记。最后，每个标记表示一个单元格。第一行中只需要一个单元格，但宽度是下一行的两倍。因此，为了精确到宽度的两倍，您在第一个标签中添加了一个具有colspan='2'属性的标记。在第二行，放两个正常细胞。哇。伟大的我需要在“text2”和“text3”下添加间隙，以便添加新行。我该怎么做？text1、text2和text3应该在一个组中（这是关于表中一个人的数据）。然后，第二个人应该有另一个text1、text2和text3数据。这意味着我需要两个数据之间的差距，这样就很容易理解这是针对两个不同的人的。我为你编辑了它（添加了一个图像），但不是真的。添加填充不是答案。。第一个人的信息和第二个人的信息仍然很难识别。第二个版本（：哇。太好了。我需要在“text2”和“text3”下添加间隙，这样我可以添加一个新行。我怎么做？text1、text2和text3应该在一个组中（这是表中一个人的数据）。然后，应该有第二个人的另一个text1、text2和text3数据。这意味着我需要在这两个数据之间留出一个间隙，以便很容易理解这是针对两个不同的人的。请查看主帖子。我为您编辑它（添加图像）不完全正确。添加填充不是答案。仍然很难识别第一个person的信息和第二个person的信息是。第二个版本（：-1
colspan
“包含一个非负整数值，指示单元格扩展了多少列”.
colspan=100%
是无效的HTML，并且
colspan
只能表示为列数。您在这里所说的（假设浏览器将忽略
%
错误）是有一个带有
colspan=100
的单元格。另外，这非常奇怪，某些浏览器不会呈现该单元格