html একটি টেবিলে নির্দিষ্ট সারি কাছাকাছি বর্ডার?



css border (7)

আপনার প্রয়োজনীয়তার উপর ভিত্তি করে আপনি MxN কোষগুলির নির্বিচারে ব্লকের চারপাশে একটি সীমানা স্থাপন করতে চান তবে জাভাস্ক্রিপ্ট ব্যবহার না করেই এটি করার কোনও সহজ উপায় নেই। আপনার কোষগুলি যদি আপনার সাথে সংশোধন করা হয় তবে ফ্লোটগুলি ব্যবহার করতে পারে তবে অন্যান্য কারণে এটি সমস্যাযুক্ত। আপনি কি করছেন ক্লান্তিকর হতে পারে কিন্তু এটি জরিমানা।

ঠিক আছে, যদি আপনি জাভাস্ক্রিপ্ট সমাধানতে আগ্রহী হন তবে 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>

আমি আনন্দের সাথে এটি করার সহজ উপায়গুলির উপর পরামর্শ দেব ...

https://ffff65535.com

আমি কিছু HTML / 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> উপরে এবং নীচে আবেদন করার চেষ্টা করেছি কিন্তু এটি কাজ করে নি। (পিএস আমি সিএসএস নতুন, তাই সম্ভবত আমি একটি মিস প্রাথমিকভাবে সমাধান যে মিস করেছি।)

নোট: আমি একাধিক সীমানা বিভাগ আছে প্রয়োজন। মৌলিক ধারণা প্রতিটি একাধিক সারি ধারণকারী একাধিক সীমানা ক্লাস্টার আছে।


আপনি যদি প্যারেন্ট টেবিলের উপর border-collapse করার জন্য border-collapse শৈলী সেট করেন তবে আপনি border-collapse স্টাইল করতে সক্ষম হবেন: (শৈলীগুলি ডেমোর জন্য ইনলাইন)

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

আউটপুট:


একটি সহজ উপায় টেবিল একটি সার্ভার পার্শ্ব নিয়ন্ত্রণ করা হয়। আপনি এইরকম কিছু ব্যবহার করতে পারেন:

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

একমাত্র অন্য উপায় যা আমি মনে করতে পারি তা হল নীচের টেবিলের চারপাশে সীমানা লাগানোর প্রতিটি সারি ঘিরে। এটি সীমানাটিকে আরও সহজ করে তুলবে তবে সম্ভাব্য অন্যান্য লেআউট সমস্যাগুলি তৈরি করবে, আপনাকে টেবিল কোষ ইত্যাদিতে প্রস্থ সেট করতে হবে।

আপনার পদ্ধতিটি আপনার অন্য লেআউট পুনর্বিন্যাসের উপর নির্ভর করে ভাল হতে পারে এবং এখানে প্রস্তাবিত পদ্ধতিটি কেবল একটি সম্ভাব্য বিকল্প।

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

কিভাবে tr {outline: thin solid black;} ? TR বা Tbody উপাদানগুলির জন্য আমার জন্য কাজ করে এবং IE 8+ সহ কিন্তু সর্বাধিক ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ appears


কৌশল রূপরেখা সম্পত্তি সঙ্গে একটু পরিবর্তন সঙ্গে enigment এর উত্তর ধন্যবাদ

এই ক্লাস ব্যবহার করুন

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

তারপর এইচটিএমএল

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

এবং ফলাফল হল এই আপনি সাহায্য করে আশা করি


প্রতিক্রিয়া আছে যে সব আপনাকে ধন্যবাদ! আমি এখানে উপস্থাপিত সমস্ত সমাধান চেষ্টা করেছি এবং আমি অন্যান্য সম্ভাব্য সমাধানগুলির জন্য ইন্টারনেটে আরো অনুসন্ধান করেছি, এবং আমার মনে হয় যে আমি প্রতিশ্রুতিবদ্ধ একটি পেয়েছি:

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>

আউটপুট:

top , bottom , left , এবং right ক্লাসগুলিকে প্রতি <td> যোগ করার পরিবর্তে, আমাকে যা করতে হবে তা হল top row <tr> , bottom row নীচে <tr> এবং row প্রতি row করতে হবে <tr> মধ্যে মধ্যে। এই সমাধান সঙ্গে কিছু ভুল আছে? কোন ক্রস প্ল্যাটফর্ম সমস্যা আছে সম্পর্কে সচেতন হওয়া উচিত?





css-tables