vue-table-<td colspan=“2“>不生效

代码是2:1:4:1:4五分布局,效果却是如下:

因为这里的表格没有指定表格布局算法

/*设置表格布局算法*/
2 table{
3     table-layout:fixed;
4 }

这里需要了解table-layout属性值、定义和用法、固定表格布局、自动表格布局。

1定义和用法

 tableLayout属性用来显示表格单元格、行、列的算法规则。

 ①该属性指定了完成表布局时所用的布局算法。

 ②固定布局算法比较快,但灵活性不强。

 ③自动布局算法比较慢,却更能反映传统的HTML表。

2固定表格布局

 ①与自动表格布局相比,允许浏览器更快地对表格进行布局;

 ②其水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关;

 ③通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。

3自动定表格布局

 ①其列的宽度是由列单元格中没有折行的最宽的内容设定的;

 ②由于其需要在确定最终的的布局之前访问表格中的所有内容,此算法有时会需要较长时间。

4table-layout属性值

  ①automatic:(默认值)列宽度由单元格内容设定;

 ②fixed: 列宽由表格宽度和列宽度设定;

 ③inherit:规定应该从父元素继承table-layout属性的值。

如果需要使用colspan="3"来决定布局,就需要给<table>标签设置table-layout属性值,如下:

<table style="table-layout: fixed">
      <table class="table table-bordered"   valign="center" style="table-layout: fixed">
        <tr>
         <td colspan="2" rowspan="4" >小程序所有人</td>
          <td colspan="1">姓名/名称</td>
          <td colspan="4">李跳跳</td>
          <td colspan="1">身份证号</td>
          <td colspan="4">222222</td>
        </tr>
      </table>

<table class="spec-table"> <thead> <tr> <th colspan="2">检验项目</th> <th>性能要求</th> <th>必检项</th> <th>抽检项</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td rowspan="14">功能测试</td> <td>充电过流保护</td> <td><el-input v-model="specForm.chargeOvercurrentProtection" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection1" /></td> <td><el-checkbox v-model="specForm.sampling1" /></td> <td></td> </tr> <tr> <td>充电过电流保护延时</td> <td><el-input v-model="specForm.chargeOvercurrentDelay" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection2" /></td> <td><el-checkbox v-model="specForm.sampling2" /></td> <td></td> </tr> <tr> <td>放电过流保护1</td> <td><el-input v-model="specForm.level1DischargeOvercurrentProtection" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection3" /></td> <td><el-checkbox v-model="specForm.sampling3" /></td> <td></td> </tr> <tr> <td>放电过电流保护1延时</td> <td><el-input v-model="specForm.level1DischargeOvercurrentDelay" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection4" /></td> <td><el-checkbox v-model="specForm.sampling4" /></td> <td></td> </tr> <tr> <td>放电过流保护2</td> <td><el-input v-model="specForm.level2DischargeOvercurrentProtection" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection5" /></td> <td><el-checkbox v-model="specForm.sampling5" /></td> <td></td> </tr> <tr> <td>放电过电流保护2延时</td> <td><el-input v-model="specForm.level2DischargeOvercurrentDelay" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection6" /></td> <td><el-checkbox v-model="specForm.sampling6" /></td> <td></td> </tr> <tr> <td>短路保护</td> <td><el-input v-model="specForm.shortCircuitProtection" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection7" /></td> <td><el-checkbox v-model="specForm.sampling7" /></td> <td></td> </tr> <tr> <td>短路保护延时</td> <td><el-input v-model="specForm.shortCircuitDelay" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection8" /></td> <td><el-checkbox v-model="specForm.sampling8" /></td> <td></td> </tr> <tr> <td>充电测试</td> <td><el-input v-model="specForm.normalCharging" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection9" /></td> <td><el-checkbox v-model="specForm.sampling9" /></td> <td></td> </tr> <tr> <td>正常放电</td> <td><el-input v-model="specForm.normalDischarging" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection10" /></td> <td><el-checkbox v-model="specForm.sampling10" /></td> <td></td> </tr> <tr> <td>开路电压</td> <td><el-input v-model="specForm.openCircuitVoltage" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection11" /></td> <td><el-checkbox v-model="specForm.sampling11" /></td> <td>单节3.6-3.7V</td> </tr> <tr> <td>PACK 内阻</td> <td><el-input v-model="specForm.packInternalResistanceMohm" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection12" /></td> <td><el-checkbox v-model="specForm.sampling12" /></td> <td>不包括测试线材阻值</td> </tr> <tr> <td>JP点连通性测试</td> <td><el-input v-model="specForm.jPpointContinuityTest" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection13" /></td> <td><el-checkbox v-model="specForm.sampling13" /></td> <td>测试点TD与B-之间电压</td> </tr> <tr> <td>NTC与P-端子间阻值</td> <td>当前电池温度在附录二R-T表中所对应的阻值在该温度±3℃所对应的阻值范围内</td> <td><el-checkbox v-model="specForm.requiredinspection14" /></td> <td><el-checkbox v-model="specForm.sampling14" /></td> <td>NTC和P-端子之间阻值,需要在在当前电池温度±3℃所对应的阻值范围内...</td> </tr> <tr> <td rowspan="5">全程活化</td> <td>CC-CV充电</td> <td colspan="3"><el-input v-model="specForm.fullCcCvCharging" style="width: 250px;" /></td> <td rowspan="7">试产阶段需全程活化,量产后可由团队评估是否简易活化</td> </tr> <tr> <td>搁置</td> <td colspan="3"><el-input v-model="specForm.fullStandby" style="width: 250px;" /></td> </tr> <tr> <td>恒流放电</td> <td colspan="3"><el-input v-model="specForm.fullConstantCurrentDischarge" style="width: 250px;" /></td> </tr> <tr> <td>搁置</td> <td colspan="3"><el-input v-model="specForm.fullStandby" style="width: 250px;" /></td> </tr> <tr> <td>充电至出货电压</td> <td colspan="3"><el-input v-model="specForm.fullChargeToShipmentVoltage" style="width: 250px;" /></td> </tr> <tr> <td rowspan="2">简易活化</td> <td>充电至出货电压</td> <td colspan="3"><el-input v-model="specForm.quickChargeToShipmentVoltage" style="width: 250px;" /></td> </tr> <tr> <td>搁置</td> <td colspan="3"><el-input v-model="specForm.quickStandby" style="width: 250px;" /></td> </tr> <tr> <td>活化标准</td> <td>放电容量</td> <td><el-input v-model="specForm.standardDischargeCapacity" style="width: 250px;" /></td> <td><el-checkbox v-model="specForm.requiredinspection15" /></td> <td><el-checkbox v-model="specForm.sampling15" /></td> <td>全程活化放电容量</td> </tr> </tbody> </table>这部分编辑框和el-checkbox 都无法编辑和点击
最新发布
11-21
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>员工信息</title> <script type="text/javascript" th:src="@{/js/vue.global.js}"></script> </head> <body> <table id="dataTable" border="1" cellspacing="0" cellpadding="0" style="text-align:center"> <tr> <th colspan="5">员工信息</th> </tr> <tr> <th>编号</th> <th>姓名</th> <th>邮箱</th> <th>性别</th> <th>操作</th> </tr> <tr th:each="employee : ${employeeList}"> <td th:text="${employee.id}"></td> <td th:text="${employee.lastName}"></td> <td th:text="${employee.email}"></td> <td th:text="${employee.gender}"></td> <td> <a @click="deleteEmployee" th:href="@{'/employee/' + ${employee.id}}">删除</a> <a href="">修改</a> </td> </tr> </table> <form id="deleteForm" method="post"> <input type="hidden" name="_method" value="delete"> </form> <script type="text/javascript"> var vue = new Vue({ el: "#dataTable", methods: { deleteEmployee: function (event) { var deleteForm = document.getElementById("deleteForm"); deleteForm.action = event.target.href; deleteForm.submit(); event.preventDefault(); } } }); </script> </body> </html> //删除员工信息 @RequestMapping(value = "/employee/{id}",method = RequestMethod.DELETE) public String deleteEmployee(@PathVariable("id") Integer id){ employeeDao.delete(id); return "redirect:/employee"; } <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <!--配置编码过滤器--> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceResponseEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!--配置 处理请求方式put,delete的HiddenHttpmethodFilter--> <filter> <filter-name>hiddenHttpMethodFilter</filter-name> <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class> </filter> <filter-mapping> <filter-name>hiddenHttpMethodFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!--配置SpringMVC的前端控制器DispatcherServlet--> <servlet> <servlet-name>DispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springMVC.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>DispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app> <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!--开启组件扫描--> <context:component-scan base-package="com.atguigu.rest"/> <!--配置thymeleaf视图解析器--> <bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver"> <property name="order" value="1"/> <property name="characterEncoding" value="UTF-8"/> <property name="templateEngine"> <bean class="org.thymeleaf.spring5.SpringTemplateEngine"> <property name="templateResolver"> <bean class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver"> <!-- 视图前缀 --> <property name="prefix" value="/WEB-INF/templates/"/> <!-- 视图后缀 --> <property name="suffix" value=".html"/> <property name="templateMode" value="HTML5"/> <property name="characterEncoding" value="UTF-8"/> </bean> </property> </bean> </property> </bean> <!--配置视图控制器--> <mvc:view-controller path="/" view-name="index"></mvc:view-controller> <!--开放对静态资源的访问呢--> <mvc:default-servlet-handler></mvc:default-servlet-handler> <!--开启mvc注解驱动--> <mvc:annotation-driven></mvc:annotation-driven> </beans> 报错 405 找不到方法
07-05
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值