求"CSS +DIV"的表格代码有哪些?

html-css017

求"CSS +DIV"的表格代码有哪些?,第1张

你可以这样写\x0d\x0a\x0d\x0a//这是一条记录，你只要循环这里就好\x0d\x0a\x0d\x0a\x0d\x0acss:\x0d\x0adiv{border-top:1px solid #efefefborder-left:1px solid #efefef}//这是外围DIV的CSS样式\x0d\x0adiv strong,div span{float:leftborder-right:1px solid #efefefdisplay:blockheight:50pxborder-bottom:1px solid #efefef}//定义一条记录的边框和高度\x0d\x0adiv strong{width:10%}//小的宽度\x0d\x0adiv span{width:40%}//大的宽度 回答于 2022-11-16

参考代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        table {

            border-collapse: collapse

        }

        table, tr, td, th {

            border: 4px solid black

        }

        th, td {

            width: 200px

            height: 50px

            text-align: center

        }

    </style>

</head>

<body>

<table>

    <tr style="height: 100px">

        <td colspan="3">

            <span style="display: blockpadding: 10pxborder: 3px solid blackwidth: 500pxfont-size: 23pxmargin: autofont-weight: bold">扫码文本框</span>

        </td>

        <td><span style="display: blockwidth: 70pxmargin: auto">加载历史入库信息</span></td>

    </tr>

    <tr>

        <th>产品名称</th>

        <th>装箱数量</th>

        <th>箱数<span style="font-size: 10px">(默认1箱)</span></th>

        <th>1</th>

    </tr>

    <tr>

        <td>A</td>

        <td>100</td>

        <td>1</td>

        <td>2</td>

    </tr>

    <tr>

        <td>B</td>

        <td>100</td>

        <td>1</td>

        <td rowspan="4"></td>

    </tr>

    <tr>

        <td>A</td>

        <td>100</td>

        <td>1</td>

    </tr>

    <tr>

        <td>合计：</td>

        <td>300</td>

        <td>3</td>

    </tr>

    <tr>

        <td colspan="3"><span style="display: blockpadding: 5pxborder: 3px solid blackwidth: 500pxfont-size: 20pxmargin: autofont-weight: bold">确认</span></td>

    </tr>

</table>

</body>

</html>

效果如下图：

其实如果做表格，还是table更优越。不过还是为你做了一个div+css表格。希望对你有所帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style>

#table{

float:left

width:800px

border-left:#999999 1px solid

border-top:#999999 1px solid

}

#table li{

float:left

width:399px

list-style:none outside

border-bottom:#999999 1px solid

border-right:#999999 1px solid

text-align:center

}

</style>

</head>

<body>

<div id="table">

<li>123</li>

<li>123</li>

<li>123</li>

<li>123</li>

<li>123</li>

<li>123</li>

</div>

</body>

</html>