问一个关于html的问题!

代码:

 <table id="app">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>{{item.price | trueprice(item.price)}}</td>
                <td><button @click='down(index)' :disabled='item.count < 2' >-</button>
                    <p>{{item.count}}</p>
                <button @click='up(index)'  >+</button></td>
                <td><button @click='remove(index)'>移除</button></td>
            </tr>
        </tbody>
        <h2>总价格:</h2>
    </table>

请问为什么这个h2标签明明写在最下面但是会跑到整个表格的上面去呢?(本来有些vue代码和样式的太长了没全拷过来了~)

运行结果:

image.png

阅读 358
评论
    2 个回答
    • 519

    table 里面只允许有 tr, td, th, thead, tbody, tfoot, caption 这些标签,其它的标签非标准的,非标准的标签没有统一的处理规则,但大多数的浏览器不会报错,只会按自己的逻辑去处理,所以什么样的结果都是可能的。

    你的需求首先要定义一个caption,注意要紧贴在<table>的后面

    <caption>总价格:</caption>

    然后如果你希望 caption 在表格的下方,需要通过css来控制

    caption {
      caption-side: bottom;
    }
      相似问题
      推荐文章