猿问
下载APP

怎么用html 或CSS写出下列的表单样子

http://img.mukewang.com/594910c10001df4205860094.jpg

慕UI1458911
浏览 6763回答 19
19回答

小世界里的白日梦

<html><head><meta charset="utf-8"><title></title> <style> table{ border-collapse:collapse; } table td{  border:1px solid #ddd;  width:80px;  height:30px;  text-align:center; } .one{  vertical-align: top; } .two{ vertical-align: top; } </style></head><body><table> <tr> <td rowspan="3" class="one">1</td> <td rowspan="3" class="two">2</td> <td>A</td> <td>28</td> <td>12%</td> </tr> <tr> <td>B</td> <td>56</td> <td>98%</td> </tr> <tr> <td>A</td> <td>33</td> <td>42%</td> </tr></table></body></html>

慕桂英5357533

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{ border-collapse:collapse; } table td{ border:1px solid #0099FF; width:80px; height:10px; text-align:center; } .one{    vertical-align:top; } .two{ vertical-align:top; } </style> </head> <body> <table border="1"> <tr> <td rowspan="4" class="one">1</td> <td rowspan="4" class="two">200</td> <td>A</td> <td>80</td> <td>40%</td> </tr> <tr> <td>B</td> <td>96</td> <td>48.00%</td> </tr> <tr> <td>C</td> <td>18</td> <td>9.00%</td> </tr> <tr> <td>D</td> <td>6</td> <td>3.00%</td> </tr> </table> </body> </html>

慕斯4031925

sbrdx

Steam_

<!doctype html><html><head><meta charset="utf-8"><title>表格</title> <style type="text/css">  .table{   border:1px solid #333;} </style></head><body> <table cellspacing="0" cellpadding="0">  <tr class="table">         <td rowspan="4" class="table">1</td>            <td rowspan="4" class="table">200</td>            <td class="table">A</td>            <td class="table">80</td>            <td class="table">40.00%</td>        </tr>        <tr>         <td class="table">B</td>            <td class="table">96</td>            <td class="table">48.00%</td>        </tr>        <tr>         <td class="table">C</td>            <td class="table">18</td>            <td class="table">9.00%</td>        </tr>        <tr>         <td class="table">D</td>            <td class="table">6</td>            <td class="table">3.00%</td>        </tr> </table></body></html>

tanya雅

rowspan

Amnesia_

直接用表格。前面两个用rows="4"就可以了

HLC_123456

用html中的table标签做出相应行列的表格,然后用css修饰表格。

qq_慕移动7587876

666

qq_慕丝7509465

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <style>  table  {             position: absolute;  top: 10px;  left: 15%;  border-collapse:collapse;  width: 70%;  }         table,th, td  {             border: 1px solid black;  text-align:center;  }         .one{             vertical-align: center;  }         .two{             vertical-align: top;  }     </style>     <title>test</title> </head> <body> <table>     <tr>         <td rowspan="5" class="one">1</td>         <td rowspan="5" class="two">200</td>     </tr>     <tr>         <td>A</td>         <td>80</td>         <td>40.00%</td>     </tr>     <tr>         <td>B</td>         <td>96</td>         <td>48.00%</td>     </tr>     <tr>         <td>c</td>         <td>18</td>         <td>9.00%</td>     </tr>     <tr>         <td>d</td>         <td>6</td>         <td>3.00%</td>     </tr> </table> </body> </html>加了position定位

新31

bootstrap即可

网站设计

http://kua0.com 跨零代码

qq_诚实可靠小郎君_0

请教大牛!

深山小童

有没有啥css代替rowspan属性

hahhhha

表格布局,合并行和并列。<html>  <head>    <meta charset="utf-8" />    <title></title>    <style> table{  border-collapse:collapse; } table td{     border:1px solid #ddd;     width:80px;     height:30px;     text-align:center;     vertical-align: middle; } .one{   vertical-align: top; } .two{  vertical-align: top; } </style>   </head>   <body>    <table>     <tbody>     <tr>       <td rowspan="3" class="one">1</td>       <td rowspan="3" class="two">2</td>       <td>A</td>       <td>28</td>       <td>12%</td>      </tr>      <tr>       <td>B</td>       <td>56</td>       <td>98%</td>      </tr>      <tr>       <td>A</td>       <td>33</td>       <td>42%</td>      </tr>     </tbody>   </table>    </body> </html>

qq_歲月靜好不忘初心_0

table

Heather_E

flex

书旅

那不就是表格吗,用html中的table标签做出相应行列的表格,然后用css修饰表格。慕课上有相关视频
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答