पहले मैं प्रोग्रामर नहीं हूं, कृपया विनम्र रहें। मैंने टेक्स्ट रैपिंग को रोकने के लिए, सभी तालिकाओं में, पहले कॉलम को बदलने के लिए कई तरीकों का प्रयास किया है। अब कॉलम तारीख को बोल्ड नहीं करता है और टेक्स्ट बहुत छोटा है। नीचे कोड है। मदद की बहुत सराहना की जाएगी।

.tablepress td {
    border: 1px solid #DDDDDD;
    font-size: 100%;
}

.tablepress td strong {
    font-size: 80%;
}

.person {
    color: #930252;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.entry-content .tablepress {
    width: auto;
    margin: 0 auto 1em;
}

.tablepress-id-12 .column-1,
.tablepress-id-13 .column-1,
.tablepress-id-28 .column-1,
.tablepress-id-27 .column-1,
.tablepress-id-34 .column-1,
.tablepress-id-35 .column-1,
.tablepress-id-36 .column-1,
.tablepress-id-64 .column-1,
.tablepress-id-65 .column-1,
.tablepress-id-67 .column-1,
.tablepress-id-68 .column-1,
.tablepress-id-71 .column-1,
.tablepress-id-72 .column-1,
.tablepress-id-63 .column-1,
.tablepress-id-69 .column-1,
.tablepress-id-82 .column-1,
.tablepress-id-37 .column-1,
.tablepress-id-84 .column-1,
.tablepress-id-85 .column-1,
.tablepress-id-101 .column-1,
.tablepress-id-99 .column-1,
.tablepress-id-102 .column-1 {
    font-size: 300%;
    min-width: 120px;
}
css
0
rstjames 13 फरवरी 2020, 22:06

2 जवाब

ऐसा करने के बेहतर तरीके हैं।

एक तालिका में पंक्तियों और स्तंभों की संरचना होती है।

पंक्तियाँ <tr> तत्व हैं। एक <tr> के अंदर आपके पास उपयोग करने के लिए दो विकल्प होते हैं, एक <th> आमतौर पर हेडर के लिए उपयोग किया जाता है और एक <td> आमतौर पर सामग्री के लिए उपयोग किया जाता है।

तो, अगर आपके पास इस तरह की एक टेबल है:

.table thead tr th:first-child {
  background-color: blue;
  color: cyan;
}

.table tbody tr td:first-child {
  background-color: blue;
  color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/css/foundation.min.css" rel="stylesheet"/>
<table class="table">
  <thead>
     <tr>
       <th>Person Name</th>
       <th>Person Age</th>
       <th>Actions</th>
     </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td><a>Edit</a> <a>Delete</a></td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td><a>Edit</a> <a>Delete</a></td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td><a>Edit</a> <a>Delete</a></td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td><a>Edit</a> <a>Delete</a></td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td><a>Edit</a> <a>Delete</a></td>
    </tr>
  </tbody>
</table>

जैसा कि आपने देखा होगा, CSS चयनकर्ताओं के साथ काम करता है, सरल हैं और अधिक जटिल हैं। इस मामले में आपको जिसकी जरूरत है वह है पहला बच्चा। चूंकि संपूर्ण तालिका के लिए कोई कॉलम परिभाषा नहीं है, आप जो करना चाहते हैं वह प्रत्येक पंक्ति के प्रत्येक पहले कॉलम को प्रभावित करता है।

tr td:first-child नियम यही करता है। मैंने उदाहरण के लिए कुछ और विशिष्टता जोड़ी।

0
Mihail Minkov 13 फरवरी 2020, 22:34
बहुत - बहुत धन्यवाद। मैं इस मदद के लिए आभारी हूं।
 – 
rstjames
13 फरवरी 2020, 23:18
क्या उत्तर आपके काम आया? क्या आपको इसके लिए और मदद चाहिए?
 – 
Mihail Minkov
14 फरवरी 2020, 01:15
मुझे वास्तव में और मदद चाहिए। अब मेरे फ़ॉन्ट आकार बहुत बड़े हैं। यहाँ मेरे पास कोड है। मेरी समझ में यह है कि कोड वास्तव में अच्छी तरह से नहीं लिखा गया है और यह समस्या की शुरुआत है..टेबलप्रेस-टेबल-नाम {font-size: 16px; रंग: #ff0000; }
 – 
rstjames
17 फरवरी 2020, 20:16
कोड प्रतिशत फ़ॉन्ट-आकार से संबंधित हो सकता है, क्या आप अपना प्रश्न अपडेट कर सकते हैं और अपना वर्तमान कोड जोड़ सकते हैं, ताकि मैं इसे देख सकूं। साथ ही, यह वर्तमान में कैसा दिखता है या एक स्निपेट का एक छवि पूर्वावलोकन उपयोगी होगा।
 – 
Mihail Minkov
17 फरवरी 2020, 23:08
मिहैल, मदद करने के लिए बहुत-बहुत धन्यवाद। मैं आगे बढ़ गया हूं और अब मैंने यह सुनिश्चित करने के लिए कोड के अंत में एक पैडिंग का उपयोग किया है कि पहला कॉलम टेक्स्ट को लपेटता नहीं है। इससे कोशिकाओं के बीच की रेखाएं गायब हो गईं, जो मैं नहीं चाहता। यहाँ मेरा वर्तमान कोड है..व्यक्ति। (सुनिश्चित नहीं है कि नया कोड कहां रखा जाए) यार मुझे खेद है कि मुझे पता है कि यह आपके लिए निराशाजनक होगा।
 – 
rstjames
19 फरवरी 2020, 00:22

आप अपना उत्तर यहां पा सकते हैं: https://stackoverflow.com/a/16478749/4330693

.tablepress td:nth-of-type(1) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px; <-- optional
}

इसके अलावा, यदि आप फ़ॉन्ट आकार बदलना चाहते हैं तो em, rem, px या vw का उपयोग करें।

font-size: 14px

0
Dustin English 13 फरवरी 2020, 22:32