在引导程序中添加表空间

Question

我有一个视频滑块，为此我使用引导程序。现在我在滑块（轮播）中插入了一个表格。它工作得很好，但我正在改变布局。下图是我想要的布局。我已经设法把背景。问题是我无法在描述的列之间插入空格。如何在每一列中插入空格？

  .rowTwo{
  background-color: #491f43;
  }
  .carousel-control.left, .carousel-control.right {
    background-image: none
}
  h1{
  color: #ffffff;
  padding: 0px;
  }
  .txt_txt{
  color: #ffffff;
  font-size: 10pt;
  padding: 0px;
  line-height: 0px;
  }

身体

  <div class="item active">
            <table class="table table-bordered">
                <tr>
                    <td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
                    <td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
                    <td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
                </tr>
                <tr>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>                       
            </table>  
  </div>

preview site

Answer 1

不知道这是否可行。但你可以有这样的东西

<div class="item active">
            <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
                <div class="col-lg-12 col-sm-12" style="padding:0px">
                    <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
                </div>
                <div class="col-lg-12 col-sm-12" >
                      <h1>Video Title<h1>
                       <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
                <div class="col-lg-12 col-sm-12" style="padding:0px">
                    <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
                </div>
                <div class="col-lg-12 col-sm-12" >
                      <h1>Video Title<h1>
                       <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
                <div class="col-lg-12 col-sm-12" style="padding:0px">
                    <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
                </div>
                <div class="col-lg-12 col-sm-12" >
                      <h1>Video Title<h1>
                       <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                </div>
            </div>

  </div>

Answer 2

这会在每个表格数据单元格之间留出空间，接近您想要实现的目标，而无需所有额外的样式。

table {
  background-color: transparent;
  border-spacing: 30px !important;
  border-collapse: separate;
}
td {
  border: 2px solid black;
}

<div class="item active">
<table class="table table-bordered">
  <tr>
    <td align="center">
      <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
    </td>
    <td align="center">
      <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
    </td>
    <td align="center">
      <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
    </td>
  </tr>
  <tr>
    <td class="rowTwo">
      <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>                       
            </table>  
  </div>