我有一个页面，其中显示了单篇文章以及您可以根据文章价格查看贷款信息的部分。

现在我创建了引导表，通过数据映射，显示它们，一切都很好。

但我遇到的问题是：我想在银行名称下显示其他数据。现在当我这样做时，其他三个td不会改变他们的高度以与第一个保持在同一条线上。

这是一切正常的屏幕截图：

现在，当我在银行下添加两件事时：

现在我所期待的是，这三个右行自动向下移动，并跟随银行（自动调整高度与第一行列的高度相同）。所以基本上我期待这样的结果：

有没有办法解决这个问题？

这是我的 Article.js 组件：

import React, { useEffect, useState, useRef } from 'react';
import { Link } from 'react-router-dom';

import Form from 'react-validation/build/form';
import Input from 'react-validation/build/input';
import CheckButton from 'react-validation/build/button';

import ArticleService from '../services/article.service';

const Article = (props) => {
  const form = useRef();
  const checkBtn = useRef();
  const [content, setContent] = useState([]);
  const [dataArr, setDataArr] = useState([]);

  const [months, setMonths] = useState([]);
  const [loading, setLoading] = useState(false);

  const onChangeMonths = (e) => {
    const months = e.target.value;
    setMonths(months);
  };

  const handleMonths = async (e) => {
    e.preventDefault();

    setLoading(true);

    if (checkBtn.current.context._errors.length === 0) {
      const id = props.match.params.id;
      try {
        const res = await ArticleService.article(id, months);
        setContent(res.data);
        const data = res.data.kredit;
        const dataArr = [];
        dataArr.push({
          name: 'kreditNKS-rataNKS',
          price: data.kreditNKS.map((item) => {
            return item;
          }),
          rate: data.rataNKS.map((item) => {
            return item;
          }),
          nks: data.stopaNKS.map((item) => {
            return item;
          }),
          banka: {
            eks: data.stopaEKS.map((item) => {
              return item;
            }),

            bankname: data.ime.map((item) => {
              return item;
            }),

            type: data.tip.map((item) => {
              return item;
            }),
          },
        });
        setDataArr(dataArr);

        setLoading(false);
      } catch (e) {
        setLoading(false);
      }
    } else {
      setLoading(false);
    }
  };

  useEffect(() => {
    const fetchPosts = async () => {
      const id = props.match.params.id;
      const res = await ArticleService.article(id);
      setContent(res.data);
      const data = res.data.kredit;
      const dataArr = [];
      dataArr.push({
        name: 'kreditNKS-rataNKS',
        price: data.kreditNKS.map((item) => {
          return item;
        }),
        rate: data.rataNKS.map((item) => {
          return item;
        }),
        nks: data.stopaNKS.map((item) => {
          return item;
        }),
        banka: {
          eks: data.stopaEKS.map((item) => {
            return item;
          }),

          bankname: data.ime.map((item) => {
            return item;
          }),

          type: data.tip.map((item) => {
            return item;
          }),
        },
      });
      setDataArr(dataArr);
    };
    fetchPosts();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const a = dataArr;

  const render = (item, index) => {
    return (
      <tr key={index}>
        <td>
          {item.banka.bankname.map((it, index2) => (
            <h4>
              {it}
              <br></br>                         //from here
              EKS: {item.banka.eks[index2]}     when i add this part, height dont change
              <br></br>
              Tip: {item.banka.type[index2]}   //to here
            </h4>
          ))}
        </td>
        <td>
          {item.nks.map((it) => (
            <h4>{it}</h4>
          ))}
        </td>
        <td>
          {item.price.map((it) => (
            <h4>{it}</h4>
          ))}
        </td>
        <td>
          {item.rate.map((it3) => (
            <h4>{it3}</h4>
          ))}
        </td>
      </tr>
    );
  };

  return (
    <div>
      <p className='text-dark'>
        <Link to='/dashboard'>
          <i className='fas fa-arrow-left'></i> Nazad
        </Link>
      </p>
      <div className='container p-3 my-3 bg-dark text-white'>
        <strong>Artikal id:{content.id}</strong>
        <br></br>
        <br></br>
        <div className='row'>
          <div className='col-sm'>
            Opis:
            <br></br>
            {content.descr}
          </div>
          <div className='col-sm'>
            Cijena
            <br></br>
            {content.price}
          </div>
          <div className='col-sm'>
            Cijena po metru kvadratnom:
            <br></br>
            {content.ppm2}/m2
          </div>
        </div>
      </div>
      <div className='container'>
        <h3>KREDITI ZA CIJENU {content.price}</h3>
        <Form onSubmit={handleMonths} ref={form}>
          <div className='form-group'>
            <label>Vrijeme otplate u mjesecima:</label>
            <Input
              type='text'
              className='form-control w-25'
              name='months'
              value={months}
              onChange={onChangeMonths}
            />

            <button
              className='btn btn-primary btn-block w-25'
              disabled={loading}
            >
              {loading && (
                <span className='spinner-border spinner-border-sm'></span>
              )}
              <span>Prikaži</span>
            </button>
            <CheckButton style={{ display: 'none' }} ref={checkBtn} />

            <small>
              Ako se ne unese vrijeme otplate kredita, kredit se izračunava za
              60 mjeseci
            </small>
          </div>
        </Form>
      </div>

      <div className='table-responsive'>
        <table className='table'>
          <thead className='thead-dark'>
            <tr>
              <th scope='col'>Informacije o banci</th>
              <th scope='col'>NKS</th>
              <th scope='col'>Ukupna cijena kredita</th>
              <th scope='col'>Mjesečna rata kredita</th>
            </tr>
          </thead>
          <tbody>{a.map(render)}</tbody>
        </table>
      </div>
    </div>
  );
};

export default Article;

编辑：

这也是我a在哪里映射数据的样子：