在引导程序中添加表空间

时间：2015-04-24 00:23:13

标签： html css twitter-bootstrap html-table

我有一个视频滑块，我使用bootstrap。现在我在滑块（旋转木马）中插入了一个表格。它工作得很好但我改变了布局。下图是我想要的布局。我设法把背景放在了一边。问题是我无法在描述的列之间插入空格。如何在每列中插入空格？

enter image description here 

  .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

2 个答案:

答案 0 :(得分：0)

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

<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>

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
table {
  background-color: transparent;
  border-spacing: 30px !important;
  border-collapse: separate;
}
td {
  border: 2px solid black;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题