antdesign表格中div高度如何能撑满整个td

antdesign表格中div高度如何能撑满整个td

<template>

  <a-table :dataSource="dataSource" :columns="columns" :scroll="{ x: 2000, y: 300 }" bordered>
    <template #headerCell="{ column }">
      <template v-if="column.dataIndex === 'name'">
        <div class="a">
          <div class="c">姓名div>
          <div class="b">
            <div>222div>
            <div>333div>
          div>
        div>
      template>
    template>
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'name'">
        <div class="b">
            <div class="d">fafsd犯得上地方div>
            <div class="e">333div>
          div>
      template>
    template>
  a-table>
  <div v-for="(item, index) in list" :key="item" draggable @dragstart.stop="onDragStart(item, index)"
    @dragover.stop="onDragOver($event)" @drop.stop="onDrop(index, item)" class="r">{{ item }}div>
template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const dataSource = ref([
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address1: '西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号',
        address2: '西湖区湖底公园2号',
        address3: '西湖区湖底公园3号',
        address4: '西湖区湖底公园4号',
        address5: '西湖区湖底公园5号',
        address6: '西湖区湖底公园6号',
        address7: '西湖区湖底公园7号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address1: '西湖区湖底公园1号',
        address2: '西湖区湖底公园2号',
        address3: '西湖区湖底公园3号',
        address4: '西湖区湖底公园4号',
        address5: '西湖区湖底公园5号',
        address6: '西湖区湖底公园6号',
        address7: '西湖区湖底公园7号',
      },
    ]);
    const columns = ref([
      {
        title: '姓名',
        dataIndex: 'name',
        width: 150,
      },
      {
        title: '年龄',
        dataIndex: 'age',
        width: 150,
      },
      {
        title: 'address1',
        dataIndex: 'address1',
        width: 150,
      }, {
        title: 'address2',
        dataIndex: 'address2',
        width: 150,
      }, {
        title: 'address3',
        dataIndex: 'address3',
        width: 150,
      }, {
        title: 'address4',
        dataIndex: 'address4',
        width: 150,
      }, {
        title: 'address5',
        dataIndex: 'address5',
        width: 150,
      }, {
        title: 'address6',
        dataIndex: 'address6',
        width: 150,
      }, {
        title: 'address7',
        dataIndex: 'address7',
        width: 150,
      }
    ]);
    return {
      dataSource,
      columns,
    };
  },
};
script>

<style lang="scss" scoped>
.a {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.b {
  display: flex;
  justify-content: space-around;
}

.c {
  border-bottom: 1px solid #eee;
}

.d {
  border-right: 1px solid #eee;
  width: 50%;
  text-align: center;
}

.e {
  width: 50%;
  text-align: center;
}

.r {
  width: 200px;
  height: 50px;
  background-color: aquamarine;
  margin-bottom: 10px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

:deep(.ant-table-tbody>.ant-table-row>td) {
  padding: 0px 4px !important;
}

:deep(.ant-table-thead>tr>th) {
  padding: 0px;
}
style>

明白题注意思了，是要d右边border模拟table的边线，需要填满整个td这样才不会出现空白。

让td relative定位，给d添加after伪元素，absolute定位，高度100%来实现右边border模拟，增加下面2个样式就行

.d {
  x-border-right: 1px solid #eee;//去掉原来的border改after伪类模拟
  width: 50%;
  text-align: center;
}
.ant-table-cell{position:relative}
.d:after{
  content:'';
  border-right:solid 1px #eee;
  position:absolute;
  right:48%;
  top:0;
  height:100%;margin-right:5px
}

要让 div 高度撑满整个 td，可以在样式中设置 div 的高度为 100%，以及将 td 的样式设置为 position: relative，然后在 td 中添加一个占据整个 td 的 div，并设置其为绝对定位（position: absolute），并设置其top, bottom, left, right 属性为 0。

以下是修改后的示例代码：

<template>
 
  <a-table :dataSource="dataSource" :columns="columns" :scroll="{ x: 2000, y: 300 }" bordered>
    <template #headerCell="{ column }">
      <template v-if="column.dataIndex === 'name'">
        <div class="a">
          <div class="c">姓名</div>
          <div class="b">
            <div>222</div>
            <div>333</div>
          </div>
        </div>
      </template>
    </template>
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'name'">
        <div class="b">
          <div class="d">fafsd犯得上地方</div>
          <div class="e">333</div>
        </div>
      </template>
    </template>
  </a-table>
  <div v-for="(item, index) in list" :key="item" draggable @dragstart.stop="onDragStart(item, index)"
    @dragover.stop="onDragOver($event)" @drop.stop="onDrop(index, item)" class="r">{{ item }}</div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const dataSource = ref([
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address1: '西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号',
        address2: '西湖区湖底公园2号',
        address3: '西湖区湖底公园3号',
        address4: '西湖区湖底公园4号',
        address5: '西湖区湖底公园5号',
        address6: '西湖区湖底公园6号',
        address7: '西湖区湖底公园7号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address1: '西湖区湖底公园1号',
        address2: '西湖区湖底公园2号',
        address3: '西湖区湖底公园3号',
        address4: '西湖区湖底公园4号',
        address5: '西湖区湖底公园5号',
        address6: '西湖区湖底公园6号',
        address7: '西湖区湖底公园7号',
      },
    ]);
    const columns = ref([
      {
        title: '姓名',
        dataIndex:
……

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：【AntDesign】解决antdesign控件在div全屏下不显示的问题

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632