table表格简单样式设置

最新推荐文章于 2024-08-08 17:11:49 发布
最新推荐文章于 2024-08-08 17:11:49 发布
阅读量3.1k 收藏
点赞数
分类专栏： html+css+div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happy_jijiawei/article/details/46438657
版权


<!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/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.table {
width: 500px;
margin-top: 30px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
body {text-align:center;}


div {text-align:left;margin:0 auto;}
</style></head>


<body>
<div class="table">
<form id="form1" name="form1" method="post" action="judge.php">
  
  <table width="500"  border="1" style="border-collapse: collapse; width: 100%">
  <tr>
    <td colspan="2" align="center"><h2>亨亿轩珠宝</h2></td>
    </tr>
  <tr>
    <td colspan="2" align="right" bgcolor="#D3EBAB" height="5px">&nbsp;</td>
    </tr>
  <tr>
    <td align="right">特等奖数量：</td>
     <td> <input type="text" name="te"   
    style="width: 180px; height: 26px;font-size:20px;  border: solid 1px green"
    οnkeyup="this.value=this.value.replace(/\D/g,'')" 
  onafterpaste="this.value=this.value.replace(/\D/g,'')"
    />
       个</td>
  </tr>
  <tr>
    <td align="right">一等奖数量：</td>
    <td> <input type="text" name="yi"   
    style="width: 180px; height: 26px;font-size:20px;  border: solid 1px green"
    οnkeyup="this.value=this.value.replace(/\D/g,'')" 
  onafterpaste="this.value=this.value.replace(/\D/g,'')"
    />
    个</td>
  </tr>
  <tr>
    <td align="right">二等奖数量：</td>
     <td> <input type="text" name="er"   
    style="width: 180px; height: 26px;font-size:20px;  border: solid 1px green"
    οnkeyup="this.value=this.value.replace(/\D/g,'')" 
  onafterpaste="this.value=this.value.replace(/\D/g,'')"
    />
       个</td>
  </tr>
  <tr>
    <td align="right">三等奖数量：</td>
     <td> <input type="text" name="san"   
    style="width: 180px; height: 26px;font-size:20px;  border: solid 1px green"
    οnkeyup="this.value=this.value.replace(/\D/g,'')" 
  onafterpaste="this.value=this.value.replace(/\D/g,'')"
    />
       个</td>
  </tr>
    <td align="right">谢谢参与数量：</td>
     <td> <input type="text" name="thank"   
    style="width: 180px; height: 26px;font-size:20px;  border: solid 1px green"
    οnkeyup="this.value=this.value.replace(/\D/g,'')" 
  onafterpaste="this.value=this.value.replace(/\D/g,'')"
    />
       个</td>
  </tr>
  <tr>
    <td  colspan="2" align="right" bgcolor="#94E2E4"height="5px">&nbsp;</td>
    </tr>
  <tr>
    <td align="right">转动圈数：</td>
    <td><input type="text" name="num"   
    style="width: 180px; height: 26px;font-size:20px;  border: solid 1px green"
    οnkeyup="this.value=this.value.replace(/\D/g,'')" 
  onafterpaste="this.value=this.value.replace(/\D/g,'')"
    />
      圈</td>
  </tr>
  <tr>
    <td align="right">转动时间：</td>
    <td><input type="text" name="time"   
    style="width: 180px; height: 26px;font-size:20px;  border: solid 1px green"
    οnkeyup="this.value=this.value.replace(/\D/g,'')" 
  onafterpaste="this.value=this.value.replace(/\D/g,'')"
    />
      秒</td>
  </tr>
  </table>
  
  <table width="500">
  <tr>
    <td colspan="3"  align="right" height="20"></td>
    </tr>
  <tr>
    <td  align="right"><input type="reset" value="重　置"
style="width: 116px; height: 36px; font-size: 23px; border: solid 1px #3285FD; background-color: #3285FD; color: white" /></td>
    <td width="100"></td>
    <td><input type="submit" value="提　交"
style="width: 116px; height: 36px; font-size: 23px; border: solid 1px #3285FD; background-color: #3285FD; color: white" /></td>
  </tr>
</table>
</form>
</div>
<span class="table"></span>




</body>
</html>
afterrains
关注
专栏目录
给table中单元格设置样式
tan_xiao_tan的博客
10-31 740
之前有个需给table中的input框根据要求添加相应的样式, 并且不可以输入,只是一个提示的作用,因此想着这样设计不太理想, 干脆给单元格设置样式? <div> <el-button v-if="constract.list" @click="hanleCell">切换</el-button> <el-form :model="constract" ref="constract"> <el-table :data="con
AngularJS表格样式简单设置方法示例
10-20
在本文中，我们将深入探讨如何在AngularJS中设置表格样式，特别是在结合Bootstrap框架时的实用技巧。AngularJS是一款强大的前端JavaScript框架，它允许开发者构建动态和交互式的Web应用。Bootstrap则是一种流行的...
table的样式设置
m0_69502730的博客
01-31 1016
1、设置element ui table 的表头。2、设置 ----------的划入效果。3、设置table大小。
Antd vue2.x a-table 表格自定义样式
最新发布
gaowxx的博客
08-08 364
2.投影部分无法使用 tr 的box-shadow实现，这里采用的是让 td 与其中的 div 产生内边距，再设置当hover时整块底部的 td 为黑到白的渐变色，所以表格两侧会出现切割痕迹。，提前用div包裹文字，用div的border来做hover tr出现的蓝色边框。1. 生成内容时使用循环插槽。
css设置表格样式
热门推荐
qq_40135955的博客
04-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置表格的边框</title> <style type="text/css"> .t{ border: 1px gray solid; bo...
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
u013179804的博客
04-19 7947
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
css table width表格宽度样式设置定义.docx
11-24
css 表格宽度样式设置定义 css 表格宽度样式设置定义是 Web 开发中一个基本而又重要的概念。它涉及到 HTML 和 CSS 两方面的内容。通过本文，我们将详细探讨如何通过 HTML 和 CSS 来定义表格的宽度，并且探讨不同的...
自适应Table表格样式特效代码
03-20
为了解决这一问题，"自适应Table表格样式特效代码"应运而生。这种特效代码利用了CSS3的先进技术，使得表格在不同屏幕尺寸下都能保持良好的可读性和视觉效果，从而提高用户在手机、平板电脑和桌面电脑等多平台的浏览...
table表格某一td内容太多导致样式混乱的解决方案
12-13
这样，即使单元格内容过多，表格的整体宽度也会保持不变，防止表格样式混乱。 2. **应用`word-break`和`word-wrap`**： - `word-break: break-all;`：这个属性允许在单词内部进行断词，即当单词过长无法在一行内...
自适应Table表格样式代码
06-24
自适应Table表格样式代码是为了确保无论用户使用何种设备浏览网页，表格都能保持清晰、易读且布局合理的状态。本文将详细讲解如何实现这样的效果，并介绍相关的关键技术和实践方法。 首先，我们需要理解表格的基本...
一款漂亮的css样式,
09-22
table表格样式，把这段代码加到你的网页中，并在代码中添加table 的class，有利于页面优化
自己比较满意的Form表单样式
03-01
写了好多表单样式 ，这个表单样式是我比较满意的Form表单样式
table的js样式
Amos318的专栏
11-13 1883
今天不忙，总结点东东供大家参考： /**  * @param 无边框，隔行换色  * @see 调用方法：在title中引入js文件，在表格后执行函数  * @paraneter rowStart & colStart默认值为0  */ function changeColorEachRow(tableID, rowStart, colStart){     var tabTable
table样式设置小结
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
10-26 3640
table表格的样式设置虽然不多，但每次用到的时候都要去问度娘,很羞耻，借鉴下官网 1.为表格设置合并边框模型： table{border-collapse:collapse;} 2.给边框设置宽度和颜色: table{border: 1px solid blue;} 3.通过 width 和 height 属性定义表格的宽度和高度 table{width:100%;} th{height:50px;} 4.text-align 和 vertical-align 属性设置表格中文本的对齐方式。 t.
前端Table小技巧—基本用法和样式
qq_44552416的博客
06-10 2457
描述：写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的，每个页面都有head ,body两部分，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。标签使用其本身所代表的含义。这就是他们的作用。(thead表格的头 tbody表格的身体 tfoot表格的脚) TBody是在table中使用的，用来指明由它包括的各表格行做为表格的主体部分。 TBody与
【pyxls】openpyxl.worksheet.table.TableStyleInfo格式效果
viviliving的专栏
04-11 879
TableStyleMedium1 Fruit 2011 2012 2013 2014 Apples 10000 5000 8000 6000 Pears 2000 3000 4000 5000 Bananas 6000 6000 6500 6000 Oranges 500 ...
设置table边框为1px
weixin_43941291的博客
08-26 2545
第一种： 1、将table的属性设置为：BORDER=0 、cellspacing=1 ； 2、设置table的背景色为即你要设置的table的边框颜色； 3、设置所有td背景色为#ffffff白色； table { background-color:black; } td { background-color:white } 第二种方法： table { border-collapse: collapse; border: none; } td { border: solid
CSS 表格：Table
梁辰兴的博客
09-19 3064
CSS折叠边框是一种用于实现边框缩小或扩张的CSS技巧，主要通过设置边框的宽度和高度，使边框在需要缩小或扩张时根据实际需要进行折叠。请注意，这只是一种模拟折叠边框的方法，实际的折叠边框效果可能需要使用其他技术或者配合其他属性来实现。如果单元格中的内容超出了单元格的宽度或高度，可以使用CSS的溢出处理方式来处理，例如使用。同时，在表格内部，单元格之间的边框是默认不显示的，如果需要显示，需要给单元格也设置。需要注意的是，对于表格的行高或单元格宽度，可以通过设置单元格的。CSS 表格属性可以用来改变表格的样式。
el-table设置表格行悬浮样式
06-09
您可以通过设置 `row-class-name` 属性来为表格行添加悬浮样式。具体实现方法如下： 1. 在 `el-table` 组件上设置 `row-class-name` 属性，值为一个函数。 2. 在该函数中，根据当前行的索引值，返回对应的悬浮样式类名。 示例代码如下： ```html <el-table :data="tableData" row-class-name="tableRowHover" > <!-- ... --> </el-table> ``` ```css .tableRowHover:hover { background-color: #f5f7fa; } ``` 在上述示例代码中，当鼠标悬浮在表格行上时，会为该行添加 `tableRowHover` 样式类，从而实现表格行悬浮样式的设置。您可以根据自己的需求修改样式类名和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值