الحدود حول صفوف محددة في الجدول؟

StackOverflow https://stackoverflow.com/questions/670424

  •  21-08-2019
  •  | 
  •  

سؤال

أحاول تصميم بعض HTML/CSS التي يمكنها وضع حد حول صفوف معينة في الجدول.نعم، أعلم أنه ليس من المفترض حقًا أن أستخدم الجداول للتخطيط ولكني لا أعرف ما يكفي من CSS لاستبدالها بالكامل حتى الآن.

على أي حال، لدي جدول يحتوي على صفوف وأعمدة متعددة، تم دمج بعضها مع الصفوف والأعمدة، وأرغب في وضع حد بسيط حول أجزاء من الجدول.أستخدم حاليًا 4 فئات CSS منفصلة (أعلى، أسفل، يسار، يمين) أرفقها بملف <td> الخلايا الموجودة على طول أعلى وأسفل ويسار ويمين الجدول على التوالي.

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}
<html>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr>
      <td class="top left">one</td>
      <td class="top right">two</td>
    </tr>
    <tr>
      <td class="bottom left">three</td>
      <td class="bottom right">four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr>
      <td class="top bottom left right" colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</html>

هل هناك طريقة أسهل لفعل ما أريد؟حاولت تطبيق أعلى وأسفل على أ <tr> لكنها لم تنجح.(ملاحظة.أنا جديد على CSS، لذلك ربما يكون هناك حل أساسي حقًا لهذه المشكلة والذي فاتني.)

ملحوظة: أنا بحاجة إلى أقسام متعددة تحدها.الفكرة الأساسية هي أن يكون لديك مجموعات متعددة محاطة بكل منها تحتوي على صفوف متعددة.

هل كانت مفيدة؟

المحلول

ماذا عن tr {outline: thin solid black;}؟يعمل بالنسبة لي على عناصر tr أو tbody و يبدو ليكون متوافقًا مع معظم المتصفحات، بما في ذلك IE 8+ ولكن ليس قبل ذلك.

نصائح أخرى

شكرا لجميع الذين استجابوا!لقد جربت جميع الحلول المقدمة هنا وقمت بمزيد من البحث على الإنترنت عن حلول أخرى ممكنة، وأعتقد أنني وجدت حلاً واعدًا:

tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}
<html>

<head>
</head>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr class="top row">
      <td>one</td>
      <td>two</td>
    </tr>
    <tr class="bottom row">
      <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr class="top bottom row">
      <td colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</body>

</html>

انتاج:

enter image description here

بدلاً من الاضطرار إلى إضافة top, bottom, left, ، و right فصول لكل <td>, ، كل ما علي فعله هو الإضافة top row إلى الأعلى <tr>, bottom row إلى أسفل <tr>, ، و row إلى كل <tr> ما بين أثنين.هل هناك أي خطأ في هذا الحل؟هل هناك أي مشكلات تتعلق بالأنظمة الأساسية يجب أن أكون على دراية بها؟

إذا قمت بتعيين border-collapse اسلوب ل collapse في الجدول الأصلي، يجب أن تكون قادرًا على تصميم tr:(الأنماط مضمنة للعرض التوضيحي) 

<table style="border-collapse: collapse;">
  <tr>
    <td>No Border</td>
  </tr>
  <tr style="border:2px solid #f00;">
    <td>Border</td>
  </tr>
  <tr>
    <td>No Border</td>
  </tr>
</table>

انتاج:

HTML output

لقد كنت أتلاعب بالقيام بذلك أيضًا، ويبدو أن هذا هو الخيار الأفضل بالنسبة لي:

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

لاحظ أن سيؤدي هذا إلى منع استخدام عروض الأعمدة السائلة/التلقائية, ، لأن الخلايا لن تتم محاذاتها مع تلك الموجودة في الصفوف الأخرى، ولكن تنسيق الحدود/الألوان لا يزال يعمل بشكل جيد.الحل هو إعطاء TR وTDs عرضًا محددًا (إما بكسل أو٪).

بالطبع يمكنك أن تجعل المحدد tr.myClass إذا كنت تريد تطبيقه على صفوف معينة فقط.فيما يبدو display: table لا يعمل مع IE 6/7، ولكن من المحتمل أن يكون هناك اختراقات أخرى (hasLayout؟) قد تعمل مع هؤلاء.:-(

إليك طريقة تستخدم عناصر tbody التي يمكن أن تكون الطريقة للقيام بذلك.لا يمكنك تعيين الحدود على tbody (مثلما لا يمكنك تعيينه على tr) ولكن يمكنك ضبط لون الخلفية.إذا كان من الممكن الحصول على التأثير الذي تريد تحقيقه باستخدام لون خلفية على مجموعات الصفوف بدلاً من الحدود، فسوف ينجح هذا.

<table cellspacing="0">  
    <tbody>
        <tr>    
            <td>no border</td>    
            <td>no border here either</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
            <td>one</td>    
            <td>two</td>  
        </tr>  
        <tr>    
            <td>three</td>    
            <td>four</td>  
        </tr>  
    <tbody>
        <tr>    
             <td colspan="2">once again no borders</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
             <td colspan="2">hello</td>  
        </tr>
    <tbody>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>

قم بتجميع الصفوف معًا باستخدام <tbody> ضع علامة ثم قم بتطبيق النمط.

<table>
  <tr><td>No Style here</td></tr>
  <tbody class="red-outline">
    <tr><td>Style me</td></tr>
    <tr><td>And me</td></tr>
  </tbody>
  <tr><td>No Style here</td></tr>
</table>

وCSS في style.css

.red-outline {
  outline: 1px solid red;
}

الطريقة الأخرى الوحيدة التي يمكنني التفكير فيها للقيام بذلك هي إحاطة كل صف من الصفوف التي تحتاج إلى حد حولها في جدول متداخل.سيؤدي ذلك إلى تسهيل تنفيذ الحدود ولكن من المحتمل أن يؤدي إلى حدوث مشكلات أخرى في التخطيط، وسيتعين عليك تعيين العرض يدويًا على خلايا الجدول وما إلى ذلك.

قد يكون النهج الذي تتبعه هو الأفضل اعتمادًا على متطلبات التخطيط الأخرى الخاصة بك، والأسلوب المقترح هنا هو مجرد بديل محتمل.

<table cellspacing="0">  
    <tr>    
        <td>no border</td>    
        <td>no border here either</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>one</td>    
                        <td>two</td>  
                  </tr>  
                  <tr>    
                      <td>three</td>    
                      <td>four</td>  
                  </tr>  
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">once again no borders</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>hello</td>  
                   </tr>
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>

بناءً على متطلباتك التي تريد وضع حد حول كتلة عشوائية من خلايا MxN، لا توجد طريقة أسهل للقيام بذلك دون استخدام Javascript.إذا تم إصلاح خلاياك، فيمكنك استخدام العوامات ولكن هذا يمثل مشكلة لأسباب أخرى.ما تفعله قد يكون مملاً ولكنه جيد.

حسنًا، إذا كنت مهتمًا بحل جافا سكريبت، باستخدام jQuery (الأسلوب المفضل لدي)، فسوف ينتهي بك الأمر مع هذا الجزء المخيف إلى حد ما من التعليمات البرمجية:

<html>
<head>

<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  box(2, 1, 2, 2);
});

function box(row, col, height, width) {
  if (typeof height == 'undefined') {
    height = 1;
  }
  if (typeof width == 'undefined') {
    width = 1;
  }
  $("table").each(function() {
    $("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
    $("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
    $("tr", this).slice(row - 1, row + height - 1).each(function() {
      $(":nth-child(" + col + ")", this).addClass("left");
      $(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
    });
  });
}
</script>
</head>
<body>

<table cellspacing="0">
  <tr>
    <td>no border</td>
    <td>no border here either</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td colspan="2">once again no borders</td>
  </tr>
</tfoot>
</table>
</html>

يسعدني أن أتلقى اقتراحات حول طرق أسهل للقيام بذلك ...

الحيلة مع خاصية الخطوط العريضة بفضل إجابة اللغز مع القليل من التعديل

استخدم هذه الفئة 

.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}

ثم في HTML

<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>

والنتيجة هيenter image description hereآمل أن يساعدك هذا

الطريقة الأسهل هي جعل الجدول عنصر تحكم من جانب الخادم.يمكنك استخدام شيء مشابه لهذا:

Dim x As Integer
table1.Border = "1"

'Change the first 10 rows to have a black border
 For x = 1 To 10
     table1.Rows(x).BorderColor = "Black"
 Next

'Change the rest of the rows to white
 For x = 11 To 22
     table1.Rows(x).BorderColor = "White"
 Next
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top