मेरे पास एक सुंदर डिज़ाइन हैवी टेबल है जो एक सेल की तरह दिखने के लिए उनके अंदर divs के साथ दो घुमावदार वें टैग का उपयोग करती है। जब मैं पृष्ठभूमि रंग देखता हूं तो मुझे फ़ायरफ़ॉक्स और सफारी (क्रोम नहीं) में दिखाई देने वाली पतली रेखा के साथ कोई समस्या हो रही है।

मैंने जो कोशिश की है।

  • ढह गई मेज।
  • सेलस्पेसिंग = "0" और सेलपैडिंग = "0"
  • परिवर्तन के लिए जोड़ा सफारी और मोज़िला उपसर्ग
  • ... अन्य का एक गुच्छा अभी भी (कृपया मदद करें)।

तालिका के साथ jsfiddle से लिंक करें https://jsfiddle.net/LTFoReal/tb51dc8x/2/

<!-- Area where code is having trouble in jfiddle -->

<th class="pole name color-Reflection" rowspan="4">
          <div class="rotate" style="margin-left:-16px;">Reflection</div>
        </th>
        <th class="pole modifier color-Reflection" rowspan="4">
          <div class="rotate" style="margin-left:-64px">Benefits</div>
        </th>

सफारी/फ़ायरफ़ॉक्स/पीडीएफ पूर्वावलोकन में यह वर्तमान में जैसा दिखता है (ऐसा लगता है कि छवियों को फिट करने के लिए सुपर आकार, ओह क्षमा करें)।

enter image description here

0
LTFoReal 1 अप्रैल 2020, 07:03
मैं अपने ब्राउज़र पर लाइन नहीं देख पा रहा हूं, न ही क्रोम और न ही फ़ायरफ़ॉक्स। क्या कोई अतिरिक्त कदम है?
 – 
Amruth Pillai
1 अप्रैल 2020, 07:18
तालिका टैग में विशेषता rules=none जोड़ने का प्रयास करें।
 – 
dale landry
1 अप्रैल 2020, 07:31
कोशिश की नियम = कोई नहीं और कोई बदलाव नहीं देखा। जब मैं सफारी में jsfiddle खोलता हूं तो मैं लाइनों को देखने में सक्षम हूं, हो सकता है कि आप इसे देखने के लिए थोड़ा सा ज़ूम इन करें।
 – 
LTFoReal
1 अप्रैल 2020, 08:06
मैंने निम्नलिखित उत्तर का उपयोग करके इसे सीएसएस के साथ जोड़ने का भी प्रयास किया लेकिन यह काम नहीं किया stackoverflow.com/questions/44896712/…
 – 
LTFoReal
1 अप्रैल 2020, 08:22
क्या आप इसे आजमा सकते हैं: <th id="header" class="pole name color-Change" rowspan="4"> और केवल इसके लिए सीएसएस #header{ border:0;}
 – 
Manjuboyz
1 अप्रैल 2020, 10:31

1 उत्तर

सबसे बढ़िया उत्तर

मुझे नहीं लगता कि यह एक उत्तर है क्योंकि मैं दोवीं कोशिकाओं को एक साथ काम नहीं कर सका। हालाँकि, मैं उन्हें एक एकल कक्ष में 4 के रोस्पैन + कोलस्पैन के साथ परिवर्तित करके और फिर 2 पी टैग के साथ एक डिव को छोड़कर और उन्हें काम करने के लिए फ्लेक्स बॉक्स का उपयोग करके इसे ठीक करने में सक्षम था।

table {
  margin-top: 40px;
}
  .pole {
    border: 1px solid var(--border-color);
    font-size: var(--font-s-normal);
  }

  .pole.name {
    width: 70px;
  }

  .pole-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: lightblue;
  }

  .pole.name .pole-container p {
     font-size: var(--font-s-normal);
    font-weight: var(--font-w-mid);
    padding: 0;
    margin: 0;
  }
  
  .rotate {
  transform: rotate(-90deg);
  }
<table>
  <tbody>
    <th class="pole name" rowspan="4" colspan="4">
        <div class="pole-container rotate">
           <p>Reflection</p>
           <p>Benefits</p>
        </div>
    </th>
   </tbody>
 </table>
0
LTFoReal 1 अप्रैल 2020, 17:27