网页制作如何设置表格的间距和背景

网页制作如何设置表格的间距和背景,第1张

步骤一:在打开的网页文档中选择表格后,在”属性“面板中即可对表格的属性进行设置。首先设置表格的id和行列值。

步骤二:接下来设置表格的宽度高度。”宽“和”高”以像素为单位,或按占浏览器窗口的宽度和高度的百分比来计算表格的宽度和高度。“宽”与“表格”对话框中的“表格宽度”选项相同。高度一般不要设置。

步骤三:下面设置表格的填充和间距

填充:单元格内容和单元格边框之间的像素数,同“表格”对话框中的“单元格边距”选项。

间距:相邻单元格之间的像素数,同“表格”对话框中的“单元格间距”选项。

步骤四:下面设置表格其他属性。

对齐:确定表格相对于统一段落中其他元素的显示位置。其中的选项包括“默认”,“左对齐”,“居中对齐”和“右对齐”。

边框:表格边框的宽度,单位为像素,同“表格”对话框中的“边框粗细”选项。

步骤五:在“属性”面板中有6个设置表格属性的快捷按钮。

“清除列宽”和“清除行高”按钮用于从表格中删除所有明确指定的行高和列宽。“将表格宽度转换成像素”和“将表格高度转换成像素”

按钮用于将表格中的宽度或高度设置为单位的当前宽度。“将表格宽度转换成百分比”和“将表格高度转换成百分比”按钮用于将表格中的宽度和高度设置为按占文档窗口百分比的表示形式。

步骤六:对表格进行颜色及背景图像的设置。

设置方法:

简单写个CSS:

<input type="text" style="height:13pxline-height:13pxwidth:40px" value="测试"></input>

这样就可以实现固定长宽的文本框,如果要写的简洁一些,可以这样在head里定义样式

<head>

<style>

#txt{

height:13px

line-height:13px

width:40px

}

</style>

</head>

<input type="text" id="txt" value="测试"></input>

<table id="InvoiceMessage" class="easyui-datagrid" style="width:240pxheight:auto" title="信息" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true,showHeader:false">  

                <thead>  

                    <tr>  

                        <th field="name1" width="80"></th>

                        <th field="name2" width="150"></th>

                    </tr>  

                </thead>                             

                <tbody>

                    <tr>

                        <td>起始号:</td>

                        <td><input type="text" name="qc_invoice_no_begin" id="qc_invoice_no_begin" value=""/></td>              

                    </tr>

                    <tr>

                        <td>结束号:</td>

                        <td><input type="text" name="qc_invoice_no_end" id="qc_invoice_no_end" value=""/></td>              

                    </tr>

                    <tr>

                        <td>当前号:</td>              

                        <td><input type="text" name="qc_invoice_no_current" id="qc_invoice_no_current" value=""/></td>              

                    </tr>

                </tbody>

            </table>

.datagrid-row {

        height: 32px

    }

修改这个css,默认25px是太小了点


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11213469.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存