Question

我有一个表格，当我使用属性时，该表格可以通过自定义CSS进行响应

<td data-column=""></td>

数据列中的大文本未包含在该<td></td>中。它在<td></td>之外。

        .table_card_view 
        { border-collapse: collapse; }

	    @media only screen and (max-width:768px) and (min-width:200px)  {
          .table_card_view, .table_card_view thead, .table_card_view tbody,
	      .table_card_view th, .table_card_view td, .table_card_view tr 
          { display: block; }  
		  
          .table_card_view thead tr 
	      { position: absolute; top: -9999px; left: -9999px; }
		  
	     .table_card_view tr { 
             border: 1px solid #ccc; margin-top: 4%; border-radius:7px;
         }
		  
	    .table_card_view td {
		  border: none; border-bottom: 0px solid #eee; 
		  position: relative; padding-left: 50%; 
	     }

	    .table_card_view td:before { 
		    top: 6px; left: 6px; width: 45%;  
            padding-right: 10px;  white-space: nowrap;
		   content: attr(data-column); color: #000; font-weight: bold;
         }
	  }
    
     <body>
	
        <table class="table table-striped table_card_view">    
            <thead>
               <tr>
                  <th> Date and Time </th>
                  <th> 
                     No. of Company 1 Users Processed in Company 2 
                  </th>
                  <th> 
                     No. of Company 2 Tickets Processed in Company 2 
                  </th>     
                  <th> Any Error ? </th>
               </tr>
            </thead>
                          
            <tbody>
               <tr>
                  <td data-column="Date and Time"> 23 July 2019 </td>
                  <td data-column="No. of Company 1 Users Processed in Company 2">
                  1 </td>
                  <td data-column="No. of Company 1 Tickets Processed in Company 2">  
                  2 </td>
                  <td data-column="Any Sync Error ?"> 0 </td>
               </tr>
               <tr>
                  <td data-column="Date and Time"> 24 July 2019 </td>
                  <td data-column="No. of Company 1 Users Processed in Company 2">
                  1 </td>
                  <td data-column="No. of Company 1 Tickets Processed in Company 2">  
                  2 </td>
                  <td data-column="Any Sync Error ?"> 0 </td>
               </tr>
            </tbody>

         </table>


        </body>

我希望在data-column =“”中使用大文本，例如data-column =“公司2中处理过的公司1用户的数量”，放置在td内，而不溢出。

Answer 1

尝试使用word-break CSS属性

   th, td {
        word-break: break-word;
    }

Answer 2

td {

box-sizing：border-box;

}

使用此属性

表的td属性的数据列中的长文本未包装在表列中

2 个答案: